Biến CSS nhiều thuộc tính

Năm ngoái, tôi đã bắt đầu giảng dạy các khóa học Phát triển Front-End cơ bản (HTML/CSS) tại một số Trường Thiết kế, tôi cũng đã nói chuyện trong một vài buổi gặp mặt với khán giả là các nhà phát triển JavaScript dày dạn kinh nghiệm hơn

Những trải nghiệm này thật tuyệt vời và thật thú vị khi thấy sự khác biệt giữa các nhà phát triển JavaScript và Nhà thiết kế khi họ bước những bước đầu tiên trong thế giới HTML và CSS

Một trong những điều mà cả hai nhóm này gặp khó khăn là khái niệm nhập nhiều giá trị vào một thuộc tính CSS, vì vậy đó là những gì chúng ta sẽ tìm hiểu trong bài viết này

Mỗi quy tắc CSS bao gồm ít nhất 3 phần. Bộ chọn, thuộc tính và (các) giá trị, như bạn có thể thấy trong hình bên dưới

Các giá trị là những thứ màu đỏ, chúng là nội dung của thuộc tính này, hãy nghĩ về một thuộc tính như đường viền, toàn bộ vấn đề là giá trị, đường viền này nên dày bao nhiêu?

Sẽ thật tuyệt nếu chúng tôi có thể khớp tất cả nội dung đường viền đó vào một thuộc tính, chúng tôi có thể và thậm chí chúng tôi có thể khớp nhiều hơn thế

Như tôi đã đề cập đến đường viền, chúng ta sẽ bắt đầu với đường viền này, bạn có thể biết rằng đường viền trong CSS có thể được xác định theo đặc điểm, giống như đường viền trong mã ví dụ bên dưới

div{
    border-width: 10px;
    border-style: solid;
    border-color: blue;
}

Tuy nhiên, nó có thể phức tạp hơn nhiều nếu bạn cần các đường viền khác nhau cho các khía cạnh khác nhau của phần tử, bạn có thể thêm trên, trái, phải, dưới như tôi đã làm trong ví dụ mã này, nhưng tôi đã bỏ cuộc sau hai khía cạnh

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Chúng tôi chắc chắn có thể làm cho mã này ngắn hơn

Chúng tôi chắc chắn có thể làm cho mã này ngắn hơn bằng cách chỉ thực hiện chương trình nghị sự của chúng tôi về nhiều giá trị cho mỗi thuộc tính và làm cho tất cả các bên xuất hiện trong thuộc tính đường viền từ ví dụ đầu tiên của chúng tôi

div{
 border-width: 10px 2px 5px 8px;
 border-style: solid dashed dotted solid;
 border-color: blue red purple green;
}

Lưu ý rằng trong ví dụ trên, thứ tự của các giá trị là. trên, phải, dưới, trái. Không cần dấu phẩy cho đường viền tại thời điểm này

Nếu bạn không cần các cạnh khác nhau, bạn cũng có thể chỉ cần nhập đường viền của mình vào một dòng như trong ví dụ bên dưới, không cần thuộc tính kiểu đường viền hoặc màu đường viền riêng biệt

div{
    border: 10px solid blue;
}

Tất nhiên, nếu chúng ta chỉ cần thay đổi màu giữa các đường viền, bạn có thể có một thuộc tính cho thuộc tính đường viền và một thuộc tính khác chỉ thay đổi những gì cần thay đổi, hãy sử dụng bản chất xếp tầng của CSS theo ý của bạn

div{
    border: 10px solid blue;
    border-color: blue red green purple;
}

Chúng tôi cũng có thể chỉ có 2 giá trị trong mã của mình, giá trị đầu tiên sẽ chỉ ra đường viền trên và dưới của chúng tôi, giá trị thứ hai sẽ chỉ ra đường viền bên của chúng tôi, cả bên trái và bên phải

div{
    border: 10px solid blue;
    border-color: blue red;
}

Nếu chúng ta có một giá trị, nó sẽ chỉ ra cả bốn phía, nếu chúng ta có 2 giá trị, nó sẽ coi chúng là giá trị dọc và ngang

Mọi thứ chúng ta thấy với đường viền cũng có thể được áp dụng cho lề và phần đệm, nếu chúng ta có một giá trị, nó sẽ chỉ ra cả bốn cạnh, nếu chúng ta có 2 giá trị, nó sẽ coi chúng là giá trị dọc và ngang, điều đó rất hữu ích cho phần đệm nút chẳng hạn

Nếu chúng ta nhập 4 giá trị, nó sẽ coi chúng là bốn cạnh của phần tử của chúng ta, theo thứ tự này. trên, phải, dưới, trái. Cũng như chúng ta đã thấy trong bất động sản biên giới

.div1{
    padding: 10px; /*same all around*/
}
.div2{
    padding: 10px 60px; /*vertical and horizontal*/
}
.div3{
    padding: 10px 100px 60px 200px; /*top,right,bottom,left*/
}

Bán kính đường viền hoạt động rất giống nhau, chúng ta có thể nhập một giá trị và tất cả các góc của chúng ta sẽ cong theo cùng một cách, nếu chúng ta nhập 2 giá trị thì giá trị đầu tiên sẽ ảnh hưởng đến các góc trên cùng bên trái và dưới cùng bên phải và

Cũng giống như thuộc tính đường viền, nếu chúng ta nhập 4 giá trị, chúng ta sẽ thấy các góc bị ảnh hưởng theo thứ tự sau. trên trái, trên phải, dưới phải, dưới trái

.div1{
    border-radius: 20px; /*all corners will curve by 20px*/
}
.div2{
    border-radius: 20px 100px; /*a leaf effect*/
}
.div3{
    border-radius: 10px 30px 50px 100px; /*every corner is unique*/
}

Tuy nhiên, bán kính đường viền có thể nhận được nhiều giá trị hơn để tạo các hình dạng phức tạp hơn như quả trứng, xem ví dụ bên dưới

Trong 8 giá trị bán kính đường viền đó, 4 giá trị đầu tiên giống như trước, trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái. 4 giá trị cuối cùng (được phân tách bằng dấu “/”) là các góc giống nhau theo cùng một thứ tự, chỉ có điều bây giờ bán kính không phải theo số lượng “x” mà là từ điểm này sang điểm khác

Bằng cách này, chúng tôi có thể tạo ra nhiều loại hình dạng hơn vì bất kỳ góc nào cũng có thể được thao tác và thu nhỏ, không chỉ theo tỷ lệ, để phù hợp với nhu cầu của chúng tôi, chúng tôi có toàn quyền kiểm soát các đường cong, không chỉ là một chỉ báo số đơn giản

Mọi thứ chúng ta thấy cho đến bây giờ chỉ là một cách viết tắt, một cách viết tắt để chúng ta viết cùng một quy tắc với ít mã hơn, nhưng không phải tất cả nhiều giá trị đều chỉ là cách viết tắt

Một số thuộc tính không thể được sử dụng theo bất kỳ cách nào khác, điều này làm cho thủ thuật thêm nhiều giá trị này không chỉ thông minh mà còn cần thiết, nếu không, bạn sẽ từ bỏ những ý tưởng hay hoặc tệ hơn, điều chỉnh HTML của bạn và thêm các phần tử không cần thiết để bù đắp cho CSS của bạn

Để rõ ràng, tôi giữ tất cả các giá trị theo thứ tự này. offset-x, offset-y, lượng mờ, kích thước offset, màu sắc

Bóng hộp được nhập ở đây với 5 giá trị, một số trong số chúng có thể được bỏ qua vì nó bằng 0 nhưng để rõ ràng, tôi đã giữ tất cả các giá trị theo thứ tự này. offset-x, offset-y, lượng mờ, kích thước offset, màu sắc

Một trong những thuộc tính thú vị nhất là box-shadow, chúng ta không thể thêm nhiều box-shadow vì cuối cùng chúng sẽ viết lại lẫn nhau trong cascade (chữ “C” trong CSS, nhớ không?)

div {
    box-shadow: 12px 12px 0 0 red;
    box-shadow: 8px 8px 0 0 green;
}

Các bóng nên được phân tách bằng dấu phẩy

Trong ví dụ trên, div sẽ kết thúc với bóng hộp màu xanh lá cây mà không tìm thấy bóng đỏ nào, nhưng chúng ta có thể sử dụng "mẹo" của mình để nhập nhiều giá trị vào cùng một thuộc tính và không giá trị nào trong số chúng bị ghi đè, các bóng sẽ

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Ví dụ trên sẽ để lại cho chúng ta cả hai bóng, màu xanh lá cây với 8px và màu đỏ bên dưới với 12px, vì vậy chúng ta sẽ chỉ thấy nó bật lên trong 4px còn lại nhưng chúng ta có thể điều chỉnh độ mờ hoặc độ mờ để đảm bảo nó ở đó và

Các bóng được nhập theo thứ tự ngược lại mà chúng tôi hiển thị chúng

Lưu ý rằng các bóng được nhập theo thứ tự ngược lại mà chúng ta hiển thị chúng, màu đỏ được hiển thị trước và sau đó màu xanh lá cây được hiển thị ở trên cùng, nếu chúng ta lật ngược thứ tự của các bóng, chúng ta sẽ chỉ thấy màu đỏ như

Nếu chúng ta muốn bóng của chúng ta ở bên trong phần tử của chúng ta (bóng bên trong, như được gọi trong hầu hết các phần mềm đồ họa), chúng ta có thể sử dụng tham số inset, lưu ý rằng mặc dù trục của chúng ta hiện đang bị lật và chúng ta sẽ cần sử dụng các giá trị âm

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Mọi thứ được nói ở đây về box-shadow cũng đúng với text-shadow, chúng được hiển thị theo cùng một cách và chúng có thể được xếp lớp theo cùng một cách, chỉ cần nhớ dấu phẩy và thứ tự hiển thị ngược

CSS cũng cung cấp cho chúng ta một cách khác để hiển thị bóng đổ trên các phần tử, chúng ta có thể sử dụng thuộc tính bộ lọc như một loại bóng đổ khác, như trong ví dụ dưới đây

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Cũng giống như bóng hộp, nếu chúng ta nhập các bóng này vào các thuộc tính bộ lọc khác nhau, thuộc tính của chúng ta sẽ bị ghi đè, nhưng lần này chúng ta không cần dấu phẩy, vì các giá trị này đã được chứa trong dấu ngoặc riêng của chúng

Những bóng này sẽ hiển thị theo thứ tự dự kiến, vì bóng xanh sẽ xuất hiện trước và sau đó là bóng đỏ, lưu ý rằng với bóng đổ, những bóng này sẽ xếp chồng lên nhau thay vì chặn nhau như chúng ta đã thấy với bóng hộp

Lưu ý rằng với bóng đổ, chúng sẽ chồng lên nhau thay vì chặn lẫn nhau như chúng ta đã thấy với bóng hộp

Thuộc tính bộ lọc không chỉ là bóng đổ, chúng ta có thể sử dụng bất kỳ giá trị nào của thuộc tính này để xếp lớp các bộ lọc của chúng ta lên nhau

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Thứ tự của các giá trị sẽ xác định cách chúng được hiển thị, lần nhập đầu tiên là lần đầu tiên được hiển thị, bằng cách này, bạn có thể tạo lớp cho bất kỳ bộ lọc nào bạn muốn. mờ, thang độ xám, độ tương phản, bầu trời là giới hạn

Trong các bài giảng của mình, tôi thường nghe thấy các sinh viên tự đánh mình vì “lãng phí” chuyển đổi khi dịch hoặc chia tỷ lệ và sau đó họ phát hiện ra rằng họ cũng cần xoay phần tử và họ bị mắc kẹt

Tin tốt. Bạn có thể xếp lớp nhiều giá trị biến đổi và vâng, bạn cũng có thể thực hiện điều đó trong một thuộc tính CSS

Transform hoạt động rất giống với box-shadow khi nó hiển thị ngược, nhưng nó cũng giống như bộ lọc vì nó không cần dấu phẩy giữa các giá trị vì chúng được chứa trong dấu ngoặc riêng của chúng

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Biến đổi hoạt động rất giống với bóng hộp khi nó hiển thị ngược

Lưu ý rằng tôi đặc biệt sử dụng translate với hai giá trị chứ không phải translateY để chỉ ra rằng bên trong dấu ngoặc, cú pháp không thay đổi và tất cả các quy tắc biến đổi thông thường vẫn được áp dụng

Giữa hai giá trị dịch bạn vẫn cần dấu phẩy, điều này có nghĩa là bạn không cần dấu phẩy giữa chính các giá trị biến đổi, trong trường hợp này là giá trị dịch và xoay

Nguồn gốc chuyển đổi cũng có thể nhận nhiều hơn một giá trị, nó có thể nhận một giá trị trên mỗi trục, vì vậy hai phần tử trong 2d, các giá trị này có thể được xác định là pixel, phần trăm, v.v. Các giá trị này cũng có thể được đặt với các từ khóa như “trung tâm”, “trên cùng”, bên trái”. Nhân tiện, những từ khóa đó không thể được thêm vào trục z trong phần tử 3d

Khi chỉ nhập một giá trị, nó sẽ chỉ ra cả hai trục, trừ khi giá trị này không tồn tại trên trục kia, chẳng hạn như “trái” hoặc “trên cùng” vì những lý do rõ ràng. Khi nhập hai giá trị, giá trị đầu tiên sẽ biểu thị trục x và giá trị thứ hai cho biết trục y, trừ khi các từ khóa đó được dành riêng cho một trục nhất định, trong trường hợp đó, không có sự khác biệt giữa việc nhập “trên cùng bên trái” và “trên cùng bên trái”

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Quá trình chuyển đổi CSS có lẽ là ví dụ thú vị nhất về điều này, vì chúng tôi không thể có nhiều hơn một chuyển đổi cùng một lúc trừ khi chúng tôi sử dụng nhiều giá trị và bất kỳ một chuyển đổi nào cũng có thể được nhập vào các giá trị tốc ký, vì vậy nó có thể gây nhầm lẫn tại

Hãy bắt đầu với cách gõ tốc ký đơn giản hơn của thuộc tính chuyển đổi này, bạn có thể thấy trong ví dụ bên dưới, chúng tôi có chuyển đổi trong 4 thuộc tính khác nhau

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Tất nhiên chúng ta có thể rút gọn nó thành một thuộc tính đơn giản gọi là transition, tương tự như những gì chúng ta đã làm với thuộc tính border

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Điều này sẽ tạo ra hiệu ứng chuyển đổi chính xác giống như vậy trên phần tử div, chỉ với ít mã được nhập hơn, nhưng nếu chúng ta muốn nhiều hơn chỉ một chuyển đổi thì sao?

Chúng tôi có thể nhập bao nhiêu tùy ý, chúng tôi phân tách chúng bằng dấu phẩy, giống như chúng tôi đã thấy trước đó với bóng hộp. Hãy nhớ rằng mọi quá trình chuyển đổi sẽ có thời lượng, chức năng thời gian và độ trễ riêng

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Ví dụ trên cho thấy một div có 2 lần chuyển đổi, khi màu nền được thực hiện xong, quá trình chuyển đổi sẽ bắt đầu do độ trễ chuyển đổi của nó, tất nhiên chúng ta có thể làm cho chúng hoạt động đồng thời bằng cách loại bỏ độ trễ đó, như trong mã ví dụ bên dưới

div{
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: red;
}

Chúng tôi cũng có thể sử dụng quá trình chuyển đổi của mình với “tất cả” thay vì thuộc tính cụ thể mà chúng tôi cần thay đổi. Đó là một cách tuyệt vời để gõ nhanh cho mục đích thử nghiệm và không phải dừng gõ và đếm số lần chuyển đổi của bạn, đôi khi nó thực sự rất thoải mái

div{
 border-width: 10px 2px 5px 8px;
 border-style: solid dashed dotted solid;
 border-color: blue red purple green;
}

Có vấn đề với quá trình chuyển đổi "tất cả", nó không dành cho mã sẵn sàng sản xuất

Có vấn đề với quá trình chuyển đổi "tất cả", nó không dành cho mã sẵn sàng sản xuất và đây là những vấn đề đó

1. Hiệu suất. quá trình chuyển đổi "tất cả" này đang báo cho trình duyệt biết rằng mọi thuộc tính CSS đều có sự thay đổi. Mọi quy tắc chúng tôi nhập (và mặc định của trình duyệt) hiện đang kiểm tra xem có điều gì đó đã thay đổi hay không và hầu hết chúng sẽ không thay đổi nên thực sự rất lãng phí tài nguyên
2. Thuộc về nghệ thuật. khi bạn sử dụng “tất cả” trong quá trình chuyển đổi của mình, bạn không thể tách chúng thành các hàm thời gian khác nhau và thời lượng khác nhau (và tất nhiên là độ trễ) vì vậy tôi gần như có thể đảm bảo rằng quá trình chuyển đổi của bạn sẽ trông tệ hơn mức có thể
3. làm việc theo nhóm. khi chúng tôi sử dụng “tất cả” trên một phần tử, mọi thuộc tính thay đổi sẽ hiển thị hoạt ảnh giữa các trạng thái đó, ngay cả những thuộc tính mà chúng tôi không cần chúng, thậm chí cả những thuộc tính mà chúng tôi (hoặc nhóm của chúng tôi) thay đổi trong JavaScript sau này, chúng tôi có chắc chắn rằng đã thắng không

những gì tôi thường làm là chỉ gõ “tất cả” trong khi tôi đang gõ nhanh và hiệu quả, khi quá trình chuyển đổi hoàn tất, tôi thay thế nó bằng các thuộc tính mà tôi thực sự thay đổi để tách chúng ra và cung cấp cho hoạt ảnh chi tiết hơn với các khoảng thời gian, độ trễ và độ trễ khác nhau

Những gì tôi thường làm là chỉ gõ “tất cả” trong khi tôi đang gõ nhanh và hiệu quả, khi quá trình chuyển đổi hoàn tất, tôi thay thế nó bằng các thuộc tính mà tôi thực sự thay đổi

Chúng tôi đã thấy cách chúng tôi có thể nhập nhiều giá trị vào một thuộc tính CSS duy nhất, một số trong số chúng được viết tắt dưới tên năng suất và một số thực sự là cách duy nhất để biến điều đó thành hiện thực

Theo tôi, nhiều bóng hộp và hiệu ứng chuyển tiếp đặc biệt hữu ích vì chúng thực sự là kết thúc mở và bạn chỉ bị giới hạn bởi trí tưởng tượng của chính mình. Một số người sử dụng nhiều bóng hộp để kích hoạt một xu hướng thiết kế hoàn toàn mới như chủ nghĩa tân cấu trúc chẳng hạn

Còn rất nhiều ví dụ về nhiều giá trị trong CSS và tôi không thể trình bày hết chúng. Nếu bạn quan tâm đến việc tìm hiểu thêm, tôi khuyên bạn nên bắt đầu với thuộc tính nền vì nó đã phát triển để bao phủ độ dốc, cũng khá mở và hấp dẫn

Tôi hy vọng bạn thích đọc bài viết này, tôi sẽ đánh giá cao những lượt vỗ tay và chia sẻ trên mạng xã hội, bạn có thể tìm thấy tôi trên Twitter, hãy cho tôi biết suy nghĩ của bạn về bài viết này

Bạn cũng có thể thích xem trang codePen của tôi và bạn có thể theo dõi tôi trên tài khoản Dribbble khá mới của tôi

Các biến CSS có phải là toàn cục không?

Loại thuộc tính CSS nào cho phép nhà phát triển đặt nhiều giá trị cho một thuộc tính trong một dòng?

Bạn có thể tạo quy tắc kiểu có nhiều khai báo không?

Phạm vi nào sẽ có mức độ ưu tiên cao hơn cho một biến CSS?