Cảm ơn bạn đã theo dõi Google I/O! Xem nội dung theo yêu cầu.

Trang này được dịch bởi Cloud Translation API.

Hàm

The CSS Podcast – 020: Hàm

Cho đến nay, trong khoá học này, bạn đã được làm quen với một số hàm CSS. Trong mô-đun lưới, bạn đã được giới thiệu về minmax() và fit-content(), giúp bạn định kích thước các phần tử. Trong mô-đun color (màu), bạn đã được giới thiệu về rgb() và hsl() để giúp xác định màu sắc.

Giống như nhiều ngôn ngữ lập trình khác, CSS có rất nhiều hàm tích hợp sẵn mà bạn có thể truy cập bất cứ khi nào cần.

Mỗi hàm CSS đều có một mục đích cụ thể. Trong bài học này, bạn sẽ có được thông tin tổng quan cấp cao, giúp bạn hiểu rõ hơn về vị trí và cách sử dụng các hàm đó.

Hàm là gì?

Hàm là một đoạn mã có tên, độc lập, hoàn thành một tác vụ cụ thể. Hàm được đặt tên để bạn có thể gọi hàm đó trong mã và truyền dữ liệu vào hàm. Đây được gọi là truyền đối số.

Sơ đồ của một hàm như mô tả ở trên

Nhiều hàm CSS là hàm thuần tuý, nghĩa là nếu bạn truyền cùng một đối số vào các hàm này, thì các hàm này sẽ luôn trả về cùng một kết quả, bất kể điều gì đang xảy ra trong phần còn lại của mã. Các hàm này thường sẽ tính toán lại khi các giá trị thay đổi trong CSS, tương tự như các phần tử khác trong ngôn ngữ, chẳng hạn như các giá trị được tính toán theo kiểu thác nước như currentColor.

Trong CSS, bạn chỉ có thể sử dụng các hàm được cung cấp thay vì viết hàm của riêng mình, nhưng các hàm có thể được lồng trong nhau trong một số ngữ cảnh, giúp các hàm linh hoạt hơn. Chúng ta sẽ trình bày chi tiết hơn về vấn đề này ở phần sau của mô-đun này.

Bộ chọn chức năng

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Bạn đã tìm hiểu về bộ chọn chức năng trong mô-đun lớp giả, trong đó có các hàm chi tiết như :is() và :not(). Các đối số được truyền vào các hàm này là bộ chọn CSS, sau đó được đánh giá. Nếu có phần tử khớp, phần còn lại của quy tắc CSS sẽ được áp dụng cho các phần tử đó.

Thuộc tính tuỳ chỉnh và `var()`

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Thuộc tính tuỳ chỉnh là một biến cho phép bạn tạo mã thông báo cho các giá trị trong mã CSS. Các thuộc tính tuỳ chỉnh cũng chịu ảnh hưởng của hiệu ứng thác nước, nghĩa là các thuộc tính này có thể được thao tác theo ngữ cảnh hoặc được xác định lại. Thuộc tính tuỳ chỉnh phải có tiền tố là hai dấu gạch ngang (--) và phân biệt chữ hoa chữ thường.

Hàm var() lấy một đối số bắt buộc: thuộc tính tuỳ chỉnh mà bạn đang cố gắng trả về dưới dạng giá trị. Trong đoạn mã trên, hàm var() có --base-color được truyền dưới dạng đối số. Nếu --base-color được xác định, thì var() sẽ trả về giá trị.

.my-element {
    background: var(--base-color, hotpink);
}

Bạn cũng có thể truyền giá trị khai báo dự phòng vào hàm var(). Điều này có nghĩa là nếu không tìm thấy --base-color, thì thông báo khai báo đã truyền sẽ được sử dụng, trong trường hợp của mẫu này là màu hotpink.

Hàm trả về một giá trị

Hàm var() chỉ là một trong những hàm CSS trả về một giá trị. Các hàm như attr() và url() tuân theo cấu trúc tương tự như var() – bạn truyền một hoặc nhiều đối số và sử dụng các đối số đó ở bên phải của phần khai báo CSS.

a::after {
  content: attr(href);
}

Hàm attr() ở đây đang lấy nội dung của thuộc tính href của phần tử <a> và đặt thuộc tính đó làm content của phần tử giả ::after. Nếu giá trị của thuộc tính href của phần tử <a> thay đổi, thì giá trị này sẽ tự động được phản ánh trong thuộc tính content này.

.my-element {
    background-image: url('/path/to/image.jpg');
}

Hàm url() nhận một URL chuỗi và được dùng để tải hình ảnh, phông chữ và nội dung. Nếu bạn không truyền một URL hợp lệ hoặc không tìm thấy tài nguyên mà URL trỏ đến, thì hàm url() sẽ không trả về giá trị nào.

Hàm màu

Bạn đã tìm hiểu tất cả về các hàm màu trong mô-đun color. Nếu chưa đọc bài viết đó, bạn nên đọc.

Một số hàm màu có sẵn trong CSS là rgb(), rgba(), hsl(), hsla(), hwb(), lab() và lch(). Tất cả các hàm này đều có dạng tương tự nhau, trong đó các đối số cấu hình được truyền vào và một màu được trả về.

Biểu thức toán học

Giống như nhiều ngôn ngữ lập trình khác, CSS cung cấp các hàm toán học hữu ích để hỗ trợ nhiều loại phép tính.

calc()

Browser Support

Source

Hàm calc() nhận một biểu thức toán học duy nhất làm tham số. Biểu thức toán học này có thể là sự kết hợp của các loại, chẳng hạn như độ dài, số, góc và tần suất. Bạn cũng có thể kết hợp các đơn vị.

.my-element {
    width: calc(100% - 2rem);
}

Trong ví dụ này, hàm calc() đang được dùng để định kích thước chiều rộng của một phần tử là 100% phần tử mẹ chứa phần tử đó, sau đó xoá 2rem khỏi giá trị đã tính toán đó.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

Bạn có thể lồng hàm calc() vào một hàm calc() khác. Bạn cũng có thể truyền các thuộc tính tuỳ chỉnh trong hàm var() dưới dạng một phần của biểu thức.

`min()` và `max()`

Browser Support

Source

Hàm min() trả về giá trị được tính nhỏ nhất của một hoặc nhiều đối số đã truyền. Hàm max() làm ngược lại: lấy giá trị lớn nhất của một hoặc nhiều đối số đã truyền.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

Trong ví dụ này, chiều rộng phải là giá trị nhỏ nhất giữa 20vw (20% chiều rộng khung nhìn) và 30rem. Chiều cao phải là giá trị lớn nhất giữa 20vh (20% chiều cao khung nhìn) và 20rem.

Lưu ý: Chúng ta sẽ đề cập đến các đơn vị như vw và vh trong mô-đun đơn vị định cỡ.

clamp()

Browser Support

Source

Hàm clamp() nhận 3 đối số: kích thước tối thiểu, kích thước lý tưởng và kích thước tối đa.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

Trong ví dụ này, font-size sẽ linh hoạt dựa trên chiều rộng của khung nhìn. Đơn vị vw được thêm vào đơn vị rem để hỗ trợ thu phóng màn hình, vì bất kể cấp độ thu phóng, đơn vị vw sẽ có cùng kích thước. Việc nhân với đơn vị rem (dựa trên kích thước phông chữ gốc) sẽ cung cấp cho hàm clamp() một điểm tính toán tương đối.

Bạn có thể tìm hiểu thêm về các hàm min(), max() và clamp() trong bài viết này.

Hình dạng

Các thuộc tính CSS clip-path, offset-path và shape-outside sử dụng các hình dạng để cắt hộp của bạn một cách trực quan hoặc cung cấp hình dạng để nội dung lưu chuyển xung quanh.

Có các hàm hình dạng có thể dùng với cả hai thuộc tính này. Các hình dạng đơn giản như circle(), ellipse() và inset() sẽ lấy các đối số cấu hình để định kích thước. Các hình dạng phức tạp hơn, chẳng hạn như polygon() sẽ lấy các cặp giá trị trục X và Y được phân tách bằng dấu phẩy để tạo hình dạng tuỳ chỉnh.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Tương tự như polygon(), cũng có một hàm path() lấy quy tắc tô màu SVG làm đối số. Điều này cho phép các hình dạng phức tạp có thể được vẽ trong một công cụ đồ hoạ như Illustrator hoặc Inkscape, sau đó được sao chép vào CSS.

Biến đổi

Cuối cùng trong phần tổng quan này về các hàm CSS là các hàm biến đổi, giúp làm lệch, đổi kích thước và thậm chí thay đổi chiều sâu của một phần tử. Tất cả các hàm sau đây đều được sử dụng với thuộc tính transform.

Xoay

Browser Support

Source

Bạn có thể xoay một phần tử bằng cách sử dụng hàm rotate(). Hàm này sẽ xoay một phần tử trên trục tâm của phần tử đó. Bạn cũng có thể sử dụng các hàm rotateX(), rotateY() và rotateZ() để xoay một phần tử trên một trục cụ thể. Bạn có thể truyền các đơn vị độ, vòng quay và radian để xác định mức độ xoay.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

Hàm rotate3d() nhận 4 đối số.

Browser Support

Source

3 đối số đầu tiên là các số, xác định toạ độ X, Y và Z. Đối số thứ tư là độ xoay, giống như các hàm xoay khác, chấp nhận độ, góc và vòng quay.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Tỷ lệ

Browser Support

Source

Bạn có thể thay đổi tỷ lệ của một phần tử bằng transform và hàm scale(). Hàm này chấp nhận một hoặc hai số làm giá trị xác định tỷ lệ dương hoặc âm. Nếu bạn chỉ xác định một đối số số, cả trục X và Y sẽ được điều chỉnh theo cùng một tỷ lệ và việc xác định cả hai là viết tắt của X và Y. Tương tự như rotate(), có các hàm scaleX(), scaleY() và scaleZ() để điều chỉnh tỷ lệ một phần tử trên một trục cụ thể.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Cũng giống như hàm rotate, có một hàm scale3d(). Hàm này tương tự như scale(), nhưng có 3 đối số: hệ số tỷ lệ X, Y và Z.

Dịch

Browser Support

Source

Hàm translate() di chuyển một phần tử trong khi vẫn duy trì vị trí của phần tử đó trong luồng tài liệu. Các phương thức này chấp nhận giá trị độ dài và tỷ lệ phần trăm làm đối số. Hàm translate() dịch một phần tử dọc theo trục X nếu bạn xác định một đối số và dịch một phần tử dọc theo trục X và Y nếu bạn xác định cả hai đối số.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Bạn có thể – giống như với các hàm biến đổi khác – sử dụng các hàm cụ thể cho một trục cụ thể, bằng cách sử dụng translateX, translateY và translateZ. Bạn cũng có thể sử dụng translate3d để xác định phép dịch X, Y và Z trong một hàm.

Skewing

Browser Support

Source

Bạn có thể làm xiên một phần tử bằng cách sử dụng các hàm skew() chấp nhận các góc làm đối số. Hàm skew() hoạt động rất giống với translate(). Nếu bạn chỉ xác định một đối số, thì đối số đó sẽ chỉ ảnh hưởng đến trục X và nếu bạn xác định cả hai đối số, thì đối số đó sẽ ảnh hưởng đến trục X và Y. Bạn cũng có thể sử dụng skewX và skewY để ảnh hưởng độc lập đến từng trục.

.my-element {
  transform: skew(10deg);
}

Phối cảnh

Browser Support

Source

Cuối cùng, bạn có thể sử dụng thuộc tính perspective – thuộc nhóm thuộc tính biến đổi – để thay đổi khoảng cách giữa người dùng và mặt phẳng Z. Điều này tạo cảm giác về khoảng cách và có thể được dùng để tạo độ sâu trường trong thiết kế.

Ví dụ này của David Desandro, trong bài viết rất hữu ích của họ, cho thấy cách sử dụng thuộc tính này, cùng với các thuộc tính perspective-origin-x và perspective-origin-y để tạo trải nghiệm thực sự 3D.

Hàm ảnh động, độ dốc và bộ lọc

CSS cũng cung cấp các hàm giúp bạn animate cho các phần tử, áp dụng độ dốc cho các phần tử đó và sử dụng bộ lọc đồ hoạ để điều chỉnh giao diện của các phần tử đó. Để giữ cho mô-đun này ngắn gọn nhất có thể, chúng sẽ được đề cập trong các mô-đun được liên kết. Tất cả đều tuân theo cấu trúc tương tự như các hàm được minh hoạ trong mô-đun này.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về hàm

Bạn có thể xác định các hàm CSS bằng ký tự nào?

[]

Các ký tự này dành cho mảng trong Javascript.

{}

Các ký tự này gói các quy tắc trong CSS.

()

Các hàm sử dụng các ký tự này để gói các đối số.

::

Các ký tự này dành cho phần tử giả trong CSS.

:

Các ký tự này dành cho lớp giả trong CSS.

CSS có tích hợp hàm toán học không?

Đúng

Có rất nhiều loại và chúng tôi sẽ tiếp tục thêm các loại khác vào thông số kỹ thuật và trình duyệt!

Sai

Hãy thử lại!

Bạn có thể đặt một hàm calc() bên trong một calc() khác như font-size: calc(10px + calc(5px * 3));

Đúng

🎉

Sai

Hãy thử lại!

Hàm nào sau đây là hàm hình dạng CSS?

ellipse()

🎉

square()

Hãy thử lại!

circle()

🎉

rect()

Hãy thử lại!

inset()

🎉

polygon()

🎉

Hàm

The CSS Podcast – 020: Hàm

Hàm là gì?

Bộ chọn chức năng

Thuộc tính tuỳ chỉnh và var()

Hàm trả về một giá trị

Hàm màu

Biểu thức toán học

calc()

min() và max()

clamp()

Hình dạng

Biến đổi

Xoay

Tỷ lệ

Dịch

Skewing

Phối cảnh

Hàm ảnh động, độ dốc và bộ lọc

Kiểm tra mức độ hiểu biết

Thuộc tính tuỳ chỉnh và `var()`

`min()` và `max()`