Biến là khối xây dựng cơ bản của bất kỳ ứng dụng phần mềm nào. Chúng giảm các nhiệm vụ dư thừa cho các nhà phát triển trong một chương trình và giữ các giá trị phải được sử dụng trong toàn bộ chương trình. Các trang web hơi khác một chút. Một người mới lập trình web có thể không biết rằng các biến tồn tại ở giao diện người dùng của quá trình phát triển web cũng như trong CSS. Các biến phục vụ cùng một mục đích khi chúng phục vụ khi việc triển khai được thực hiện bằng C++, Python, v.v. Công việc và sự phức tạp của họ đã thúc đẩy chúng tôi tạo ra một blog chuyên dụng về các biến CSS
Biến CSS [còn được gọi là Thuộc tính tùy chỉnh] là một đặc tả CSS hiện đại đang trở nên nổi bật nhờ sự hỗ trợ rộng rãi của trình duyệt. Nó giảm thời gian mã hóa và bảo trì, đồng thời cho phép bạn phát triển các trang web tương thích với nhiều trình duyệt. Nó cũng giúp khai báo các giá trị để sử dụng lại trên một tệp CSS, điều mà trước đây chỉ có thể thực hiện được với các bộ tiền xử lý như Sass và LESS
Trong blog này, chúng ta sẽ khám phá các biến CSS là gì và cách sử dụng các biến trong CSS để tạo các trang web phản hồi đẹp mắt. Cuối cùng, chúng tôi sẽ sao lưu nó bằng các ví dụ thực tế. Vì vậy, hãy bắt đầu
Bạn mới sử dụng Bộ chọn CSS?
Biến CSS là gì?
Biến CSS là thuộc tính tùy chỉnh mà bạn có thể lưu trữ giá trị và sử dụng giá trị đó ở bất kỳ đâu trong mã HTML. Chúng được giới thiệu trong Chrome 49 và cực kỳ phổ biến kể từ đó. Tuy nhiên, không giống như các ngôn ngữ lập trình hỗ trợ cú pháp khởi tạo và thay thế đơn giản, các biến CSS cần được xác định cụ thể cho dù chúng đang được khởi tạo hay thay thế. Do đó, cả hai điều này đều có cú pháp riêng biệt
Việc khởi tạo biến CSS được thực hiện bằng cách thêm tiền tố “–” vào tên biến. Ví dụ: cú pháp sau khởi tạo biến “my_font” thành 20px
--my_font: 20px;
Biến “my_font” hiện có thể được sử dụng ở bất kỳ đâu bên trong mã với giá trị “20px”. Tiếp đến là phần thay thế. Việc thay thế một thuộc tính cho biến chỉ có thể được thực hiện bởi thuộc tính CSS “var[]”. Bên trong “var[]”, chúng ta đánh vần tên biến như hình bên dưới
cỡ chữ. var[--my_font];
Trong cú pháp trên, kích thước phông chữ của bộ chọn sẽ trở thành 20px do biến my_font. “var[]” lấy một đối số khác ngoài tên biến – giá trị dự phòng. Giá trị dự phòng hoạt động như một mạng lưới an toàn trong thay thế biến. Trong các trường hợp không thể truy cập được giá trị của biến, giá trị dự phòng sẽ được sử dụng ở vị trí của nó. Giá trị dự phòng có thể được khai báo như hình bên dưới
cỡ chữ. var[--my_font, 20px];
Giá trị dự phòng hoạt động khác nhau ở các khía cạnh khác nhau. Chúng ta sẽ thảo luận vấn đề này sau trong bài đăng này với một số minh họa thú vị liên quan đến trình duyệt web
Cuộc sống trước các biến CSS – Bộ tiền xử lý SASS
Trước khi hiểu cách sử dụng các biến trong CSS và tầm quan trọng của chúng trong biểu định kiểu trang web, chúng ta cần hiểu những gì chúng ta đã từng làm trước các biến trong CSS. Trước khi chúng tôi có thuộc tính tùy chỉnh tuyệt vời này để sử dụng, các nhà phát triển web sẽ sử dụng các biến SASS, có ý định tương tự nhưng không mượt mà và linh hoạt
Các biến SASS hoạt động tương tự như các ngôn ngữ phụ trợ nơi chúng tôi sao chép-dán tên biến bất cứ khi nào cần thay thế. Tuy nhiên, việc khởi tạo được thực hiện bằng cách thêm tiền tố “$” vào tên biến
$my_font: 20px;
Việc thay thế có thể được thực hiện như hình dưới đây
font-size: $my_font;
Vấn đề với SASS là nó là bộ tiền xử lý chứ không phải thuộc tính tùy chỉnh dưới dạng biến CSS. Do đó, bất kỳ biến nào được khai báo trong SASS cần phải được biên dịch trước khi nó có thể được thực thi. Điều này làm cho biến tĩnh và không thể thay đổi khi chạy. Do đó, một vấn đề rất phổ biến phát sinh khi nhà phát triển cố gắng khởi tạo lại biến như sau
Điều này bây giờ sẽ thay đổi giá trị của my_font thành 21px. Để đặt lại giá trị về 20px, chúng ta phải trừ đi một giá trị từ nó. Điều này không xảy ra trong các biến CSS, vì chúng ta có được lợi thế của hàm “calc”, mà chúng ta sẽ đề cập sau trong blog này
Biến SASS so với. Biến CSS
Bảng sau đây sẽ giúp bạn vẽ một bức tranh rõ ràng giữa hai biến
Biến SASS
Biến CSS
phân bổ tĩnh
phân bổ động
Truy vấn phương tiện không được hỗ trợ
Hỗ trợ truy vấn phương tiện
Yêu cầu tiền xử lý
Bộ tiền xử lý không cần thiết
Một lớp tính toán và độ phức tạp được thêm vào
Quản lý biến một lớp và trực tiếp
Các biến SASS thường được sử dụng trước các biến CSS. Nhưng sự khác biệt giữa chúng không thể bỏ qua. Các biến CSS hữu ích hơn so với các biến SASS nhưng cũng khác nhau ở nhiều khía cạnh khác. Hãy xem chúng trong phần tiếp theo
Đọc. Bộ tiền xử lý CSS – Sass vs LESS vs Stylus
Tầm quan trọng của các biến CSS
Trước khi chúng ta tiếp tục và hiểu cách sử dụng biến trong CSS, hãy khám phá một số lợi ích của việc sử dụng biến trong CSS. Là một nhà phát triển web, bạn sẽ có thể liên hệ với nó và nhìn lại cuộc sống của bạn sẽ dễ dàng hơn như thế nào khi có chúng
1. Loại bỏ dư thừa trong mã
Các biến loại bỏ sự dư thừa trong mã. Ví dụ: giả sử chúng tôi có yêu cầu trang web rất nhỏ với tất cả các tiêu đề [thẻ h] có cùng “màu. màu đỏ. ”
Biến CSS
Cho đến thời điểm này, mọi thứ đều ổn và chúng tôi nhận được kết quả chính xác trên trang web của mình
Bây giờ, giả sử nhóm quyết định thay đổi màu thành xanh lục cho mọi tiêu đề. Để làm điều này, chúng tôi phải đi qua "tìm và thay thế" ba lần trên trang, điều này có thể chấp nhận được. Nhưng còn việc xây dựng một trang web thực sự, nơi việc này sẽ được thực hiện 100 lần trở lên chỉ với một thay đổi duy nhất thì sao?
Các biến trong CSS loại bỏ sự dư thừa này khỏi hệ thống mà chúng ta chỉ cần thay đổi màu một lần – trong giá trị của biến
màu. var[--heading_color, đen];
màu. var[--heading_color, đen];
màu. var[--heading_color, đen];
Trong đoạn code trên, bất cứ khi nào có thay đổi phát sinh, tôi chỉ cần thay đổi giá trị của biến “heading__color” từ “red” thành “green. ”
2. Không cần tiền xử lý
Bộ tiền xử lý được sử dụng để biên dịch các biến. Bây giờ chúng ta có các biến trong CSS, chúng ta có thể đặt giá thầu tạm biệt cho bộ xử lý và thực hiện các hoạt động động trên các biến. Vì vậy, trong ví dụ trên, khi tôi thay đổi màu từ Đỏ sang Xanh lục hoặc Lục lam [hoặc bất kỳ thứ gì khác], tôi không cần phải biên dịch lại trang của mình. Thay vào đó, tôi chỉ cần nhấn F5 và các thay đổi sẽ được phản ánh trên trình duyệt web
3. Siêu linh hoạt – Khai báo mọi lúc mọi nơi
Biến CSS là thuộc tính tùy chỉnh của CSS. Tương tự như các thuộc tính tùy chỉnh khác, bạn có thể sử dụng các biến trong CSS ở bất cứ đâu bạn muốn. Đây là cách bạn có thể sử dụng nó với thẻ phong cách
màu. var[--heading_color, đen];
Sử dụng nó nội tuyến có thể là một tùy chọn khác
< kiểu h2 = "màu. var[--heading_color, black]">Tôi đang hướng tới số 2
4. Cải thiện khả năng đọc mã
Đối với các nhà phát triển, khả năng đọc mã có lẽ là một trong những điểm khó khăn nhất. Xem xét đoạn mã sau nơi chúng tôi áp dụng màu sắc cho các yếu tố khác nhau trên trang web
Xét trường hợp 100 dòng sau mình chọn cùng màu h1 cho đoạn khác vì đó là kế hoạch của team
Nhưng có thể dự đoán rằng màu được sử dụng trong đoạn này giống như được sử dụng trong tiêu đề không? . Điều này trở nên khó khăn hơn nhiều khi chúng ta nói về khoảng 10 hoặc 20 tình huống như vậy. Đây là cách bạn có thể cải thiện khả năng đọc mã và làm cho nó dễ đoán hơn với các biến trong CSS
--màu khác. rgb[194, 70, 48];
màu. var[--heading_color, đen];
màu. var[--other_color, đen];
màu. var[--heading_color, màu đen]
Vì biến của “p” tương tự như “h2” nên cả hai đều có cùng màu. Một lợi thế bổ sung của mã có thể đọc được là việc tìm lỗi chính tả trở nên dễ dàng hơn rất nhiều. Ví dụ: giả sử sau này bạn phát hiện ra rằng “H2” và “p” lẽ ra không phải cùng màu?
Để làm cho chúng giống nhau, bạn có thể phải thực hiện nhiệm vụ tìm kiếm và thay thế các trường hợp mà bạn đã đọc từng chữ số giá trị theo chữ số. Thay vào đó, bạn có thể xác định các biến CSS. Trong đoạn mã trên, lớp “root” định nghĩa các biến, đây là một trong những phương thức định nghĩa biến trong CSS
Biến CSS và JavaScript
Các biến CSS có thể truy cập DOM của trang web, điều này rất hữu ích khi xử lý JavaScript. Đây là một lợi thế lớn khi biết rằng JavaScript có thể giúp chúng tôi tạo mã tuyệt vời bằng cách tìm nạp giá trị biến và đặt nó thành các giá trị khác nhau dựa trên các điều kiện được xác định trước
Kết quả cuối cùng [tôi. e. , trang web] năng động hơn, thân thiện với người dùng hơn và mang lại nhiều quyền kiểm soát hơn cho nhà phát triển. Quy trình và mã để thao tác các biến với sự trợ giúp của JavaScript được xác định trong một phần riêng ở cuối blog này
Biến Calc và CSS
Trong phần biến SASS, tôi đã đề cập đến hàm calc và cách nó mang lại lợi thế cho các biến trong CSS. Chức năng calc là một chức năng quan trọng đối với những người thích đặt các thứ tương đối với nhau. Ví dụ: nếu bạn quan tâm đến kiểu chữ linh hoạt trong thiết kế web, chức năng calc có thể sẽ tập trung vào các thiết kế kiểu chữ của bạn
Ngoài ra, hàm calc là một hàm CSS cơ bản cho phép chúng ta thực hiện các phép tính. Ví dụ, các hàm Calc thường được sử dụng để áp dụng các thuộc tính tương đối trong HTML
Đây là cách tôi sẽ đặt tiêu đề thành 2. Lớn gấp 5 lần cỡ chữ của đoạn văn
cỡ chữ. tính[20 * 2. 5]px;
Nhưng vấn đề ở đây là mặc dù tôi đã đặt đúng yêu cầu nhưng tôi vẫn phải xem kích thước đoạn văn của mình. Điều này dẫn đến sự dư thừa trong mã nguồn. Các biến trong CSS có thể được sử dụng với hàm calc giống như bất kỳ thuộc tính nào khác để giảm thiểu sự dư thừa
Cách tiếp cận được mô tả ở trên có thể được thay thế bằng các biến CSS như hình bên dưới
cỡ chữ. calc[var[--paragraph_size] * 2. 5];
đầu ra
Dòng thứ hai là cỡ chữ mặc định ban đầu của thẻ “h2”. Mã này sẽ được thảo luận thêm trong phần ngoại lệ để chỉ ra một số lỗi phổ biến trong các biến CSS
Phạm vi trong các biến CSS
Trong phần triển khai được hiển thị trước đó, lớp giả gốc [trong đó biến được khai báo] và tầm quan trọng của nó trong trang tính CSS có vẻ hơi đáng ngờ. Tuy nhiên, lớp này là một phần của “phạm vi” và phần này sẽ làm nổi bật tầm quan trọng của nó đối với các biến trong CSS
Phạm vi toàn cầu – Một tuyên bố cho tất cả
Thuộc tính phạm vi gần giống với phạm vi của một biến trong các ngôn ngữ lập trình. Phạm vi của biến CSS không khác. Đây là cách bạn có thể xác định một biến CSS trong hai phạm vi
- Phạm vi toàn cầu – Được chấp nhận từ đầu đến cuối tài liệu
- Phạm vi cục bộ – Chỉ được chấp nhận trong bộ chọn
Khi một biến được xác định với phạm vi toàn cầu, sự tồn tại của nó được xác định trong tài liệu hoàn chỉnh kể từ thời điểm khai báo. Nhưng các ngôn ngữ lập trình khác như Python hoặc C++ có một trường mở giữa các chức năng mà bạn có tùy chọn để xác định phạm vi toàn cầu
Thật không may, CSS không có khu vực này do thiếu bộ tiền xử lý. Do đó, trong CSS, chúng tôi sử dụng lớp giả gốc, có nghĩa là biến nằm dưới gốc của tài liệu [i. e. toàn cầu]
Biến này hiện có thể được gọi trong bất kỳ bộ chọn nào trong cùng một tài liệu
. var[--my_variable, dự phòng]
Bộ chọn gốc hoạt động vì các biến trong CSS có thể truy cập DOM của mã ứng dụng web. Gốc ở đây đại diện cho gốc của cây DOM truyền dữ liệu đến các nhánh của nó [i. e. , tài liệu đầy đủ]
Phạm vi cục bộ – Được giới hạn bởi Tường bộ chọn
Phạm vi cục bộ của các biến trong CSS bị giới hạn bởi các ranh giới của bộ chọn bên trong nó đã được xác định. Chẳng hạn, trong đoạn mã dưới đây, tôi đã xác định màu nền cho hộp div có id là “first_div”
màu nền. var[--my_bg, đen];
tôi là một div
đầu ra
Hãy tạo một div khác và đặt màu nền giống như đã thực hiện với div ở trên
màu nền. var[--my_bg, đen];
màu nền. var[--my_bg, trắng];
tôi là một div
Tôi cũng là một div
đầu ra
Giá trị dự phòng được áp dụng [i. e. , màu nền đen] sang div thứ hai. Điều này xảy ra vì phạm vi của biến “my_bg” chỉ nằm trong thẻ #first_div. Do đó, “my_bg” sẽ không thể truy cập được bên ngoài các dấu ngoặc đó. Hãy thử hiển thị cùng một trang web với “my_bg” được xác định trong phần gốc và xem nó trông như thế nào
Quyền ưu tiên và kế thừa
Bây giờ chúng ta biết rằng khi một biến được định nghĩa trong thư mục gốc của tài liệu, nó có phạm vi toàn cục và khi được định nghĩa bên trong bất kỳ bộ chọn nào, nó có phạm vi cục bộ. Nhưng, nếu cùng một biến được khai báo ở cả hai nơi thì sao?
Việc triển khai sau đây minh họa hai kỹ thuật khác nhau để khởi tạo cùng một biến CSS và tác dụng của nó trên trang web
màu nền. var[--my_bg, đen];
màu nền. var[--my_bg, đen];
đầu ra
Không có div nào ở đây có màu nền đen. Điều này có nghĩa là không có biến nào bị lỗi và giá trị dự phòng không bao giờ được sử dụng. Hơn nữa, nếu bạn đọc mã, div thứ hai đã sử dụng phiên bản toàn cầu của biến trong khi div đầu tiên chọn biến cục bộ. Do đó, chúng tôi có thể xác nhận rằng phạm vi cục bộ được ưu tiên hơn phạm vi toàn cầu trong các biến CSS
Về phần thừa kế. CSS nổi tiếng về tính kế thừa, khiến nhiều nhà phát triển web bối rối khi mọi thứ lấy các giá trị không bao giờ được xác định trong phạm vi của chúng. Vì vậy, kế thừa có nghĩa là gì trong CSS?
Kế thừa là mối quan hệ giữa các phần tử được lồng vào nhau. Ví dụ: đoạn mã sau hiển thị mối quan hệ cha-con
Xin chào, tôi là một đứa trẻ
Tương tự, chúng ta có thể định nghĩa các mối quan hệ anh chị em khác. Nhưng các mối quan hệ này ảnh hưởng đến thuộc tính của nhau [xuống dòng từ trên cùng] khi giá trị được đặt thành "kế thừa" hoặc không thể tìm thấy. Việc triển khai sau đây thể hiện mối quan hệ cha-con trong đó phần tử con không có cài đặt biến CSS cho màu nền của nó
CSS
màu nền. var[--my_bg, đen];
màu nền. var[--my_bg, đen];
màu nền. var[--my_bg, đen];
màu nền. var[--my_bg, đen];
HTML
Nếu một biến không được tìm thấy cho phần tử, nó sẽ kế thừa giá trị biến từ cha của nó. Do đó, đoạn mã trên sẽ thấy các màu nền sau cho tất cả các div
- first_div. màu xanh da trời
- second_div. màu xanh lam – được thừa hưởng từ cha mẹ
- third_div. màu xanh lá
- 4_div. màu xanh lam - được thừa hưởng từ cha mẹ được thừa hưởng từ cha mẹ của nó
Tất cả bốn giá trị đều có thể dự đoán được khi xem xét logic kế thừa trong sơ đồ trên
Giá trị dự phòng trong các biến CSS
Giá trị dự phòng là đối số thứ hai được sử dụng trong hàm “var[]”, biểu thị việc thay thế một biến CSS. Các giá trị dự phòng lấy tên từ công việc chúng thực hiện – chúng được sử dụng khi bạn dự phòng với các giá trị biến ban đầu
Có bốn khả năng mà một biến CSS sẽ thực hiện trong quá trình thay thế
- Trình duyệt không hỗ trợ thuộc tính biến CSS
- Trình duyệt hỗ trợ thuộc tính và biến được đặt thành giá trị chính xác với phạm vi
- Trình duyệt hỗ trợ thuộc tính, nhưng biến không được đặt thành bất kỳ giá trị nào
- Trình duyệt hỗ trợ thuộc tính và biến được đặt thành giá trị không hợp lệ
Điều gì xảy ra nếu trình duyệt không hỗ trợ các biến CSS?
Nếu trình duyệt không hỗ trợ các biến trong CSS, dòng mã CSS có “/var[]” sẽ bị bỏ qua hoàn toàn vì trình duyệt không hiểu nó. Trong những trường hợp như vậy, trình duyệt sẽ nhận các giá trị mặc định, tôi. e. , trong suốt
Hãy kiểm tra mã trên Google Chrome 46 không hỗ trợ các biến CSS
màu nền. var[--my_bg, đen];
Màu tôi đã áp dụng cho biến “my_bg” không được hiển thị trên hộp div. Đồng thời, hộp div tồn tại ở đây nhưng chỉ trong suốt
Để chứng minh ứng dụng web của mình, tôi đã sử dụng nền tảng thử nghiệm nhiều trình duyệt trực tuyến LambdaTest. Nó cung cấp hơn 3000 trình duyệt và hệ điều hành để kiểm tra các trang web và ứng dụng web về các vấn đề tương thích giữa các trình duyệt
Đọc. 10 cách để tránh các vấn đề tương thích giữa các trình duyệt
Biến được đặt và nằm trong phạm vi
Nếu biến được đặt thành một giá trị hợp lệ và đang được gọi trong phạm vi của nó, thì nó sẽ được triển khai chính xác. Vì vậy, ví dụ: thực thi mã trên trên Google 47 trở lên sẽ hiển thị kết quả chính xác
Biến không bao giờ được khởi tạo
Kịch bản tiếp theo xảy ra khi biến không bao giờ được khởi tạo nhưng được thay thế trong mã ở đâu đó
màu nền. var[--my_bg, đen];
đầu ra
Hộp div lấy giá trị dự phòng trong trường hợp này. Điều tương tự xảy ra khi biến được khởi tạo nhưng được gọi bên ngoài phạm vi của nó
Biến được đặt thành giá trị không hợp lệ
Nếu biến được đặt thành một giá trị không hợp lệ dựa trên cách sử dụng của nó, chẳng hạn như px hoặc deg đối với màu, nền sẽ trở nên trong suốt
màu nền. var[--my_bg, đen];
đầu ra. /p>
Vì vậy, dòng biến bị trình duyệt bỏ qua
Các giá trị dự phòng không hoạt động mỗi khi biến gây ra lỗi. Hơn nữa, nó chỉ hoạt động với một số trường hợp được mô tả ở trên. Vì vậy, với tư cách là nhà phát triển web, chúng tôi có thể làm gì để quản lý các sự cố tương thích giữa các trình duyệt?
Thực hiện hai dự phòng
Phương pháp tốt nhất là đặt một mạng lưới an toàn trong mã CSS của bộ chọn vẫn có thể đặt giá trị cho thuộc tính trong trường hợp biến CSS bị lỗi
màu nền. #9e2e50;
màu nền. var[--my_bg, đen];
Nếu biến không được khởi tạo trong đoạn mã trên, giá trị sẽ được lấy từ lần khởi tạo “màu nền” đầu tiên. Tuy nhiên, nếu nó được khởi tạo, giá trị sẽ được lấy từ biến
Mặc dù không nhất thiết phải là một "dự phòng" nghiêm ngặt, nhưng các biến trong CSS cũng có thể thực hiện các giá trị dự phòng cho các trường hợp ngoại lệ khác nhau bằng cách sử dụng các phương thức biến CSS xếp tầng
màu nền. var[tên_biến, var[tên_biến, dự phòng]];
Tuy nhiên, nó có nhiều tầng tính toán và cần thời gian để thực hiện. Do đó, phương pháp này không bao giờ được khuyến nghị cho nhà phát triển web
Ngoại lệ trong các biến CSS
Khi bạn biết cách sử dụng các biến trong CSS, bạn sẽ thấy nó rất linh hoạt và dễ sử dụng. Tuy nhiên, chúng có một vài ngoại lệ mà người ta nên nhớ trước khi khai báo và thay thế các biến
Xem phụ thuộc theo chu kỳ
Phụ thuộc theo chu kỳ rõ ràng với tên của họ. Khi các phụ thuộc được tạo với nhau, nhà phát triển web phải xác minh rằng chu trình không được tạo giữa các biến. Nếu một chu kỳ được tạo, việc thực thi mã có thể dẫn đến một vòng lặp vô hạn khiến trang web có thể hết thời gian vì nó sẽ không bao giờ tải hoàn toàn
--biến_tên_1. var[tên_biến_2, dự phòng];
--biến_tên_2. var[tên_biến_1, dự phòng];
Một quá trình tương tự sẽ được nhìn thấy khi một biến sẽ phụ thuộc vào chính nó trong thời gian khởi tạo
--variable_1 = var[variable_1, fallback];
Các nhà phát triển web phải luôn lưu ý các phụ thuộc theo chu kỳ trong khi khởi tạo các biến
Các biến CSS phân biệt chữ hoa chữ thường
Các biến CSS phân biệt chữ hoa chữ thường. Do đó, các biến my_var và My_var đều khác nhau
Biến CSS không thể là tên thuộc tính
Tên biến CSS không thể có giá trị như một thuộc tính hiện có trong CSS. Vì vậy, ví dụ, bạn không thể khởi tạo một biến có giá trị “cỡ chữ. ”
Các biến CSS với JavaScript
Một trong những điểm hấp dẫn nhất đối với các nhà phát triển yêu thích JavaScript là các biến trong CSS có thể được xử lý và thao tác với sự trợ giúp của JavaScript một cách dễ dàng. Để sử dụng các biến trong CSS với JavaScript, bạn có thể tìm nạp giá trị hiện tại của chúng tương tự như cách JS xử lý các thuộc tính khác
Đoạn mã sau tìm nạp biến CSS [được sử dụng cho kích thước phông chữ] và tăng kích thước phông chữ của nó lên 40px khi chúng ta nhấn nút
Biến CSS
cỡ chữ. var[--fontSize, 12px];
màu nền. #9e2e50;
chức năng thay đổiFontSize[] {
var r = tài liệu. bộ chọn truy vấn ['. nguồn gốc'];
var rs = getComputingStyle[r];
r. Phong cách. setProperty['--fontSize', '40px'];
Thay đổi cỡ chữ
đầu ra
Khả năng tương thích trình duyệt của các biến CSS
Các biến CSS được hỗ trợ tuyệt vời từ mọi trình duyệt chính. Nếu bạn biết cách sử dụng các biến trong CSS, bạn có thể đảm bảo rằng các ngoại lệ và dự phòng hoạt động chính xác theo mã
Sau khi triển khai, bạn có thể sử dụng LambdaTest để thực hiện kiểm tra khả năng tương thích của trình duyệt nhằm đảm bảo trình duyệt hiển thị chính xác trên các phiên bản trình duyệt và hệ điều hành khác nhau
Cách sử dụng trình duyệt LT để kiểm tra khả năng phản hồi của các biến CSS
Từ phổ biến nhất của thế giới phát triển web hiện nay là khả năng đáp ứng. Với việc Google chỉ định khả năng phản hồi bất cứ khi nào có thể và nhiều thiết bị tràn ngập thị trường, bản thân thiết kế web đáp ứng đã trở thành ưu tiên hàng đầu
Đọc. Tầm quan trọng của thiết kế web đáp ứng
Các biến trong CSS không phải là thành phần trực quan có thể được kiểm tra bằng chức năng thay đổi kích thước cửa sổ để biết khả năng phản hồi. Nhưng chúng ảnh hưởng đến các thành phần trực quan như div, hình ảnh hoặc bất kỳ thứ gì khác. Do đó, kiểm tra khả năng đáp ứng rất quan trọng với các truy vấn phương tiện CSS cho dù các biến trong CSS có hỗ trợ chúng hay không
Đoạn mã sau triển khai các truy vấn phương tiện CSS cùng với các biến CSS
Biến CSS
màn hình chỉ @media và [chiều rộng tối thiểu. 641px] {
màn hình chỉ @media và [chiều rộng tối đa. 640px]{
màu. var[--my_second_color];
chờ nó
đầu ra
Văn bản gốc có màu đỏ trong đoạn mã trên cho đến khi kích thước cửa sổ lớn hơn 640px. Khác, màu văn bản trở thành màu xanh lá cây
Thực hiện kiểm tra khả năng đáp ứng không phải là một công việc dễ dàng. Bạn cần nhiều thiết bị khác nhau và việc sở hữu hoặc cho thuê mọi thiết bị không phải là một cách khả thi. Thay vào đó, chúng ta cần lựa chọn giải pháp thông minh khi giải quyết vấn đề đáp ứng
Ở đây, tôi khuyên dùng LT Browser – một công cụ kiểm tra thân thiện với thiết bị di động để thực hiện kiểm tra khả năng phản hồi của các trang web và ứng dụng web của bạn trên hơn 50 chế độ xem được cài đặt sẵn cho Windows OS, macOS, Android và iOS. LT Browser đi kèm với các tính năng hàng đầu như công cụ dành cho nhà phát triển có thể nâng cao trải nghiệm thử nghiệm của bạn và cung cấp môi trường thoải mái để phản hồi
Các tính năng của Trình duyệt LT bao gồm cuộn đồng thời hai thiết bị, hiển thị các trang web được lưu trữ cục bộ, đạt được khả năng phản hồi của trang web thông qua thử nghiệm phản hồi bằng cách sử dụng điều tiết mạng, tạo báo cáo hiệu suất, chụp ảnh màn hình toàn trang, quay video, v.v.
Đọc. 11 lý do tại sao các nhà phát triển nên sử dụng LT Browser
LT Browser miễn phí sử dụng và đáng để thử đối với các nhà phát triển web đam mê, những người muốn thực hiện kiểm tra khả năng phản hồi của các trang web và ứng dụng web của họ trên tất cả các độ phân giải của thiết bị
TẢI XUỐNG TRÌNH DUYỆT LT
Nếu bạn là người mới sử dụng LT Browser, hãy tham khảo hướng dẫn LT Browser của chúng tôi để bắt đầu kiểm tra khả năng phản hồi ngay lập tức
Phần kết luận
Là một nhà phát triển web, các biến luôn là một phần trong biểu định kiểu của tôi. Tôi chắc chắn rằng sau khi kết bạn với họ hôm nay, bạn cũng sẽ bắt đầu sử dụng chúng thường xuyên. Các biến trong CSS loại bỏ phần dư thừa khỏi mã và điều tốt nhất là chúng chỉ là một thuộc tính khác trong CSS. Tuy nhiên, sau khi triển khai các biến CSS, bạn phải thực hiện kiểm tra khả năng phản hồi của thiết kế web của mình. Bạn có thể làm theo danh sách kiểm tra thiết kế web đáp ứng để giảm bớt toàn bộ quá trình kiểm tra khả năng đáp ứng
Trong hướng dẫn này, chúng ta đã học cách sử dụng các biến trong CSS từ quá trình triển khai đến kiểm tra khả năng đáp ứng. Tôi hy vọng các biến trong CSS là thứ mà bạn thích và chia sẻ với các nhà phát triển đồng nghiệp của mình. Nếu bạn có trải nghiệm thú vị nào với các biến trong CSS, vui lòng chia sẻ chúng trong phần bình luận bên dưới
Các câu hỏi thường gặp
Làm cách nào để sử dụng var[] trong CSS?
Biến var[] trong CSS được sử dụng để nhập giá trị của thuộc tính tùy chỉnh [còn được gọi là biến CSS] thay vì bất kỳ thành phần nào trong giá trị của thuộc tính khác
Tôi nên sử dụng biến CSS hay biến SASS?
Các biến SASS thường được sử dụng trước các biến CSS. Tuy nhiên, không thể bỏ qua sự khác biệt giữa chúng. Biến CSS có giá trị hơn biến SASS, nhưng chúng cũng khác nhau về nhiều mặt
Làm cách nào để khai báo một biến trong CSS?
Để khai báo một biến trong CSS, trước tiên, hãy đặt tên cho biến, sau đó thêm hai dấu gạch ngang [–] làm tiền tố. Cú pháp khai báo một biến trong CSS là var[--name, value]