Podcast CSS – 020: Hàm
Trong khoá học này, bạn đã tìm hiểu một số hàm CSS.
Trong mô-đun lưới (grid),
bạn đã được làm quen với minmax() và fit-content(),
các phần tử này giúp bạn xác định kích thước các phần tử.
Trong mô-đun color,
bạn đã được giới thiệu về rgb() và hsl(), giúp bạn xác định màu sắc.
Giống như nhiều ngôn ngữ lập trình khác, CSS có nhiều hàm tích hợp mà bạn có thể sử dụng bất cứ khi nào bạn 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ẽ nhận được thông tin tổng quan, giúp bạn hiểu rõ hơn nhiều về vị trí và cách sử dụng các hàm CSS đó.
Hàm là gì?
Hàm là một đoạn mã độc lập, có tên và hoàn thành một tác vụ cụ thể. Một hàm được đặt tên để bạn có thể gọi hàm đó trong mã cũng như có thể truyền dữ liệu vào hàm. Đây được gọi là đối số truyề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 hàm đó,
thì hàm sẽ luôn trả về cho bạn 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 của bạn, tương tự như các phần tử khác trong ngôn ngữ, chẳng hạn như các giá trị xếp tầng được tính toán như currentColor.
Trong CSS, bạn chỉ có thể sử dụng các hàm đã cung cấp thay vì tự viết, nhưng các hàm có thể được lồng vào nhau trong một số ngữ cảnh để tăng tính linh hoạt. Chúng ta sẽ tìm hiểu chi tiết hơn về vấn đề đó ở phần sau của học phần 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ề các bộ chọn chức năng trong mô-đun lớp giả lập trình bày chi tiết các hàm như :is() và :not().
Các đối số được chuyển vào các hàm này là bộ chọn CSS, sau đó sẽ được đánh giá.
Nếu có kết quả trùng khớp với các phần tử, thì 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 mã hoá các giá trị trong mã CSS của mình.
Các thuộc tính tuỳ chỉnh cũng chịu ảnh hưởng của tầng này, có nghĩa là bạn có thể điều chỉnh hoặc xác định lại theo ngữ cảnh.
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()
nhận 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 một giá trị.
Trong đoạn mã trên, hàm var() có --base-color được truyền dưới dạng một đố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, khai báo đã chuyển sẽ được sử dụng. Trong trường hợp của mẫu này, chúng tôi sẽ sử dụng màu hotpink.
Hàm trả về một giá trị
Hàm var() chỉ là một trong các hàm CSS trả về một giá trị.
Các hàm như attr() và url() có 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 trong phần khai báo CSS.
a::after {
content: attr(href);
}
Hàm attr() ở đây sẽ lấy nội dung thuộc tính href của phần tử <a> và đặt nội dung này làm content của phần tử giả ::after.
Nếu thay đổi giá trị thuộc tính href của phần tử <a>, thì điều 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() lấy một URL chuỗi và được dùng để tải hình ảnh, phông chữ và nội dung.
Nếu 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 mọi kiến thức về hàm màu trong mô-đun color. Nếu bạn chưa đọc báo cáo đó, chúng tôi thực sự khuyên 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 đối số này đều có dạng tương tự, trong đó đối số cấu hình được truyền vào và 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 tính toán.
calc()
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ể kết hợp nhiều 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() được dùng để xác định kích thước chiều rộng của một phần tử là 100% của phần tử mẹ chứa phần tử mẹ, 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);
}
Hàm calc() có thể được lồng vào bên trong một hàm calc() khác.
Bạn cũng có thể truyền các thuộc tính tuỳ chỉnh vào hàm var() dưới dạng một phần của biểu thức.
min() và max()
Hàm min() trả về giá trị nhỏ nhất được tính của một hoặc nhiều đối số đã truyền.
Hàm max() làm ngược lại: nhận 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 trong khoảng từ 20vw (tức là 20% chiều rộng khung nhìn) và 30rem.
Chiều cao phải là giá trị lớn nhất trong khoảng từ 20vh (tức là 20% chiều cao khung nhìn) đến 20rem.
hàm clamp()
Hàm clamp() nhận 3 đối số: kích thước tối thiểu, kích thước lý tưởng và đối số 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ể mức thu phóng, đơn vị vw sẽ có cùng kích thước.
Nhân với một đơn vị rem (dựa trên cỡ chữ gốc) sẽ cung cấp hàm clamp() có một điểm tính toán tương đối.
Bạn có thể tìm hiểu thêm về 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 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 cho nội dung di chuyển xung quanh.
Bạn có thể dùng các hàm hình 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 để xác đị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%);
}
Giống 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 bạn vẽ các hình dạng có độ phức tạp cao bằng một công cụ đồ hoạ như Illustrator hoặc Inkscape, sau đó sao chép vào CSS của bạn.
Biến đổi
Cuối cùng trong phần tổng quan về hàm CSS là các hàm biến đổi, có tác dụng 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 được dùng với thuộc tính transform.
Chế độ xoay
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 giữa của phần tử đó.
Bạn cũng có thể 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ể chuyển các đơn vị độ, rẽ 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ố.
3 đối số đầu tiên là các số, xác định các toạ độ X, Y và Z. Đối số thứ tư là xoay (tương tự như các hàm xoay khác) chấp nhận độ, góc và góc.
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
Điều chỉnh theo tỷ lệ
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 tỷ lệ như nhau và việc định nghĩa cả hai là viết tắt của X và Y.
Giống như rotate(), cũng 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, hàm scale3d() cũng có một hàm.
Điều này tương tự như scale(), nhưng cần có 3 đối số: hệ số tỷ lệ X, Y và Z.
Dịch
Các hàm translate()
di chuyển một phần tử trong khi phần tử đó vẫn duy trì vị trí của phần tử đó trong luồng tài liệu.
Phương thức này chấp nhận các giá trị độ dài và phần trăm làm đối số.
Hàm translate() chuyển đổi một phần tử dọc theo trục X nếu một đối số được xác định cũng như dịch một phần tử dọc theo trục X và Y nếu cả hai đối số đều được xác định.
.my-element {
transform: translatex(40px) translatey(25px);
}
Tương tự như các hàm biến đổi khác, bạn có thể 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, cho phép bạn xác định bản dịch X, Y và Z trong một hàm.
Xiên
Bạn có thể làm lệch một phần tử bằng các hàm skew() chấp nhận góc làm đối số.
Hàm skew() hoạt động theo cách rất giống với translate().
Nếu bạn chỉ xác định một đối số, đối số đó sẽ chỉ ảnh hưởng đến trục X và nếu bạn xác định cả hai, đối số đó sẽ ảnh hưởng đến trục X và Y.
Bạn cũng có thể sử dụng skewX và skewY để tác động độc lập đến từng trục.
.my-element {
transform: skew(10deg);
}
Phối cảnh
Cuối cùng, bạn có thể sử dụng thuộc tính perspective – một phần của họ 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 khoảng cách và có thể được dùng để tạo độ sâu trong thiết kế của bạn.
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 API 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 3D thực sự.
Hàm ảnh động, độ dốc và bộ lọc
CSS cũng cung cấp các hàm giúp bạn tạo ảnh động cho các phần tử, áp dụng hiệu ứng chuyển màu cho các phần tử đó và sử dụng các bộ lọc đồ hoạ để chỉnh sửa 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 được đề cập trong các mô-đun được liên kết. Tất cả đều có cấu trúc tương tự như các hàm được minh hoạ trong học phần này.
Kiểm tra kiến thức
Kiểm tra kiến thức về hàm
Hàm CSS có thể được xác định bằng những ký tự nào?
[]{}():::CSS có tích hợp hàm toán học?
Bạn có thể đặt hàm calc() bên trong một calc() khác như font-size: calc(10px + calc(5px * 3));
Mục nào sau đây là hàm hình dạng CSS?
ellipse()square()circle()rect()inset()polygon()