Hàm

Podcast CSS – 020: Hàm

Cho đến nay trong khoá học này, bạn đã biết về một số hàm CSS. Trong mô-đun grid, 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, bạn được làm quen với 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 sẵn để bạn có thể truy cập 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ẽ có được cái nhìn tổng quan, giúp bạn hiểu rõ hơn nhiều về vị trí và cách sử dụng chúng.

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ể. Hàm được đặt tên để bạn có thể gọi trong mã và truyền dữ liệu vào hàm đó. Đây được gọi là truyền đối số.

Nhiều hàm CSS là hàm thuần tuý, có nghĩa là nếu bạn truyền cùng đối số vào chúng, chúng sẽ luôn trả lại 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ẽ được tính toán lại khi các giá trị trong CSS của bạn thay đổi, tương tự như các yếu tố khác trong ngôn ngữ, chẳng hạn như các giá trị xếp chồng được tính toán như currentColor.

Trong CSS, bạn chỉ có thể sử dụng các hàm được 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, giúp họ linh hoạt hơn. Chúng tôi sẽ trình bày chi tiết hơn về điều này ở 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ề bộ chọn chức năng trong mô-đun lớp giả các chức năng 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 đó sẽ được đánh giá. Nếu khớp với các phần tử, phần còn lại của quy tắc CSS sẽ được áp dụng cho các quy tắc đó.

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ủa mình. Các tài sản tuỳ chỉnh cũng chịu ảnh hưởng của tầng này có nghĩa là chúng có thể bị thao túng hoặc định nghĩa lại theo ngữ cảnh. Một thuộc tính tuỳ chỉnh phải có tiền tố là hai dấu gạch ngang (--) và có phân biệt chữ hoa chữ thường.

var() hàm 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 một giá trị. Trong đoạn mã trên, hàm var() đã truyền --base-color làm đối số. Nếu bạn xác định --base-color, 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 thể tìm thấy --base-color, phần khai báo đã truyền sẽ được dùng. Trong trường hợp của mẫu này là màu hotpink.

Các 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() 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 bản khai báo CSS.

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

Hàm attr() tại đây đang lấy nội dung thuộc thuộc tính href của phần tử <a> và đặt phần tử này là 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> là thay đổi, đ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à dùng để tải hình ảnh, phông chữ và nội dung. Nếu không truyền được URL hợp lệ vào hoặc không tìm thấy tài nguyên mà URL trỏ đến, 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 qua thì bạn nên làm như vậy.

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 thuộc tính này đều có dạng tương tự, 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 tính toán.

calc()

calc() lấy một biểu thức toán học duy nhất làm tham số. Biểu thức toán này có thể được kết hợp các loại, như chiều dài, số, góc và tần số. 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ử 100% của phần tử mẹ chứa trong đó, sau đó xoá 2rem khỏi giá trị đã tính đó.

: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 một hàm calc() khác. Bạn cũng có thể truyền 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()

min() hàm trả về giá trị nhỏ nhất được tính toán của một hoặc nhiều đối số đã truyền. max() hàm thì thực hiện 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 20vw — chiếm 20% chiều rộng của khung nhìn và 30rem. Chiều cao phải là giá trị lớn nhất trong khoảng từ 20vh — chiếm 20% chiều cao khung nhìn và 20rem.

clamp()

clamp() hàm nhận ba đối số: kích thước tối thiểu, có 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ẽ được 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ợ việc 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) 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

Chiến lược phát hành đĩa đơn clip-path! offset-path và shape-outside Thuộc tính CSS sử dụng hình dạng để cắt hình ảnh hộp của bạn hoặc cung cấp hình dạng cho nội dung luồng 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. Hình dạng đơn giản như circle()! ellipse() và inset() lấy các đối số cấu hình để định kích thước chúng. Các hình dạng phức tạp hơn, chẳng hạn như polygon() 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 lấp đầy SVG làm đối số. Điều này cho phép vẽ các hình dạng có độ phức tạp cao bằng công cụ đồ hoạ như Illustrator hoặc Inkscape rồi 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 này là hàm biến đổi, làm lệch, đổi kích thước và thậm chí thay đổi độ sâu của một phần tử. Tất cả hàm sau đây đều được dùng với thuộc tính transform.

Góc xoay

Bạn có thể xoay một phần tử bằng cách sử dụng rotate() , sẽ xoay một phần tử trên trục giữa của nó. Bạn cũng có thể sử dụng rotateX()! rotateY() và rotateZ() để xoay phần tử trên một trục cụ thể. Bạn có thể chuyển đơn vị độ, độ rẽ và radian để xác định mức độ xoay.

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

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

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

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

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 đều sẽ được chia tỷ lệ như nhau và việc xác định cả trục là viết tắt của X và Y. Giống như rotate(), có scaleX(), scaleY() và scaleZ() dùng hàm để điều chỉnh tỷ lệ phần tử trên một trục cụ thể.

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

Tương tự 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

translate() các hàm sẽ di chuyển một phần tử trong khi phần tử đó vẫn duy trì vị trí của nó trong luồng tài liệu. Các giá trị này chấp nhận giá trị độ dài và 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 một đối số được xác định, và 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);
}

Bạn có thể (giống như 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ể, đang 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ách sử dụng skew() các hàm 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, nó 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 — thuộc tập hợp 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 mang lại cảm giác xa cách và có thể được dùng để tạo chiều sâu trường trong thiết kế của bạn.

Ví dụ này của David Desandro, từ bài viết rất hữu ích của họ, cho thấy cách sử dụng, cùng với các thuộc tính perspective-origin-x và perspective-origin-y để tạo ra 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 và sử dụng bộ lọc đồ hoạ để điều chỉnh giao diện của ảnh. Để giữ cho học phần này càng ngắn gọn càng tốt, 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 kiến thức

Kiểm tra kiến thức về hàm