12 Mẹo CSS nâng cao ít người biết đến

Nếu bạn đã học về CSS hay CSS3 xong mà vẫn cảm thấy khó khăn trong việc viết CSS cho trang web của mình thì bạn đã tìm đúng bài viết này.

Bài viết này tôi sẽ hướng dẫn bạn 12 mẹo CSS nâng cao giúp ích cho bạn rất nhiều khi gặp vướng mắc lúc viết CSS.

Chúng ta sẽ bắt đầu ngay.

Verical padding liên quan đến chiều rộng chứ không phải chiều cao.

Cụ thể chúng ta hãy xem ví dụ.

Trong đoạn code trên tôi lấy 1 div lớn làm container có width: 200px và height: 600px;

Bạn hãy theo dõi chỉ số width và height để rõ hơn.

Trong khoi1 tôi đã để padding-top: 100%;

khoi2 có padding-top: 50%;

Tuy nhiên, kết quả ở đây bạn có thể thấy rõ, padding-top: 100%; là bằng 200px và padding-top: 50%; là bằng 100px.

Vậy, ở đây, padding-top là chỉ số gắn với chiều rộng của phần tử cha, chứ không phải là theo chiều cao.

Biết được điều này chúng ta dễ dàng tạo ra các yếu tố giúp giữ tỷ lệ width/height:

.square {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

Opacity có thể thay đổi việc sắp xếp theo thứ tự của z-index

Đây là sự thực.

Giả sử bạn có 3 khối div. Mỗi khối được thêm thuộc tính z-index để chúng xếp chèn lên nhau.

Ở đây chúng ta có khối red (z-index: 10;), green (z-index: 2;) và blue (z-index: 1;). Theo thứ tự thì chúng ta có khối green chèn lên trên khối blue và khối red chèn lên trên tất cả.

Bây giờ chúng ta sẽ thêm thuộc tính opacity: 0.99; vào khối red. Kết quả nhận được là khối red nằm bên dưới tất cả.

Để giải thích điều này chúng ta có lẽ sẽ cần tới 1 bài viết khác. Ở bài viết này tôi chỉ tập trung giới thiệu về các mẹo CSS.

Lề trùng lặp (margins overlap)

Chúng ta có ví dụ sau:

<div style="margin-bottom:20px">foo</div>
<div style="margin-top:20px">bar</div>

Kết quả được hiển thị như trong hình.

Bạn có thể thấy, ở đây khối div có khoảng cách với nhau là 20px mà không phải là cộng dồn thành 40px.

Tuy nhiên, sẽ có những ngoại lệ:

1. Phần tử sử dụng float

2. Phần tử sử dụng position: absolute;

3. Phần tử có thuộc tính inline-block

4. Các phần tử có thuộc tính overflow

5. Phần tử đã clear

6. Phần tử gốc (root)

Thuộc tính CSS tùy chỉnh và biến

Sử dụng SASS hoặc LESS chúng ta có thể có sức mạnh phi thường của của thuộc tính CSS tùy chỉnh và biến ở trong bộ tiền xử lý đó. Nhưng có một vài điểm khác biệt.

// bạn có thể thiết lập thuộc tính tùy chỉnh như vậy:

:root {
 --foo: #000;
}
button {
  background-color: var(--foo); //background màu #000
}

Chúng có tính kế thừa, vì vậy, nếu bạn gán lại cho biến cục bộ nó sẽ ảnh hưởng đến tất cả các phần tử con và ngược lại trong bộ tiền xử lý. Trình duyệt sẽ tính toán lại tất cả các biến và biểu thức có thể xảy ra.

Bạn có thể sử dụng các dấu gạch chéo ngược bằng dấu phẩy, bạn có thể ngăn xếp nhiều lần dự phòng sau dấu phẩy, thậm chí các biến khác:

.foo {
  color: var(—-my-var, 'blue');
}

Điều này dẫn chúng ta đến sự khác biệt chính từ bộ tiền xử lý: Biến CSS nhận thức được cấu trúc của DOM và tính dynamic.

::root {
  --default-color: #000000;
}

header {
 --primary-color: #ff0000;
}
a {
 color: var(--primary-color, --default-color);
}

<a href="">this is black</a>
<header>
  <a href="">this is red.</a>
</header>

Trái ngược với ví dụ đầu tiên về khả năng kế thừa, ví dụ này dựa trên tính kế thừa từ cha.

Thẻ a sẽ không có màu đỏ như màu đã khai báo trong header, vì nó không nằm trong header. Và nó có thiết lập thêm lựa chọn màu thứ hai.

Hơn nữa, chúng cũng có thể dễ dàng thay đổi bằng javascript:

// lấy biến từ kiểu inline style
element.style.getPropertyValue("—-my-var");

// set biến trên kiểu inline style
element.style.setProperty("--my-var", jsVar + 4);

*Được hỗ trợ kể từ Edge15.

Vertical align: top | middle | bottom

Vertical-align: top | middle | bottom: hoạt động cho inline (và cả inline-block) và table-cell, đó không phải là cách đúng để căn chỉnh phần tử bên trong phần tử gốc theo cách mà người ta có thấy một cách trực quan.

Hãy sử dụng flexbox.

Height: 100% có thể không làm những gì bạn nghĩ

Trong nhiều trường hợp đặt height: 100%; không mang lại điều bạn mong đợi vì chiều cao của phần tử gốc không được đặt:

Ví dụ:

<html>
<body>
  <div style=”height:100%;background:red;”></div>
</body>
</html>

Trong trường hợp này chiều cao của body và html không được thiết lập. Do đó thuộc tính height: 100%; của khối div không xác định được chiều cao gốc là như thế nào.

Vì thế nó sẽ không hoạt động đúng với mong muốn.

ID > Class

Kiểu id sẽ ghi đè tất cả các kiểu class. Điều này là do id chính xác hơn class, tương tự “.foo.bar” sẽ chỉ ghi đè “.foo” hoặc “.bar”.

#foo { color: red; } 
.bar { color: green; } 

<h1 id="foo" class="bar">this will be red not green</h1>

Trong ví dụ này, màu của h1 sẽ là màu đỏ bởi vì id chính xác hơn class.

Nhắm mục tiêu theo thuộc tính

Bạn có thể nhắm mục tiêu vào các thuộc tính cụ thể và nội dung của chúng, ví dụ như nội dung thuộc tính src hoặc href.

// Nhắm mục tiêu vào các thuộc tính có giá trị kết thúc bằng .zip
a[href$=".zip" i] { }

// Nhắm mục tiêu vào thuộc tính có giá trị chứa "google.com"
[href*="google.com"] { color: red; }

Điều này rất hữu ích khi gỡ lỗi, ví dụ như hiển thị hình ảnh không có thuộc tính Alt hoặc trống:

img:not([alt]) {
 border: 2px dashed red;
}

img[alt=""] {
 border: 2px dashed red;
}

Nếu bạn đang sử dụng Angular, điều này thật sự hữu ích khi muốn nhắm mục tiêu một số thành phần chứa [ng-click]. Hoặc muốn nhắm mục tiêu bắt đầu bằng "http" hoặc "https".

Các giá trị trục Horizontal / Vertical không nhất quán.

Khi khai báo giá trị cho trục ngang và trục dọc, thường là số đầu tiên khai báo giá trị dọc và thứ hai theo chiều ngang (ví dụ: trong “padding: 10px 20px;” 10px ở trên và dưới, 20px là trái và phải). Điều này đúng với padding, margin, border, vv khá nhiều thứ.

… Ngoại trừ “border-spacing” (khoảng cách đường viên) trong các bảng, trong đó: số đầu tiên đặt cho giá trị ngang và giá trị dọc thứ hai…

Nhiều background

Bạn có thể thêm nhiều background vào một phần tử duy nhất và định vị chúng hoàn toàn khác nhau, chỉ cần tách biệt bằng dấu phẩy như sau:

background: url(example1.png’) no-repeat center 50px, url(‘example2.jpg’) no-repeat bottom top;

*Hỗ trợ từ IE11

Xếp chồng hình động

Tương tự như background, bạn cũng có thể chồng hình ảnh động CSS:

@keyframes foo { 
 0% { opacity: 0; } 
 100% { opacity: 1; } 
}
@keyframes bar { 
 0% { transform: translateX(-100px); } 
 100% { transform: translateX(0px); } 
}
.element {
 animation: foo 2s 0s, bar 1s 0s;
}

Hành vi lạ của "position: fixed;" và "translateZ".

Thêm transform: translateZ(0); vào container có chứa một phần tử có position: fixed; làm cho phần tử cố định căn chỉnh với container thay vì window.

Như ví dụ dưới đây.

Ở đây, phần tử cha của khối fixed đang căn theo window. Nhưng sau khi thêm thuộc tính transform: translateZ(0) thì nó bây giờ căn theo khối div cha.

Trên đây là 12 mẹo rất hữu ích trong quá trình viết CSS. Hi vọng bạn nắm bắt và vận dụng được trong các trường hợp khác nhau.