8 thuộc tính ít được biết đến trong CSS

Bài đăng này đã không được cập nhật trong 7 năm

CSS đã được khoảng một thời gian dài - từ năm 1994 tùy thuộc vào người bạn hỏi - và đã trở thành yếu tố tiêu chuẩn cho phong cách của các trang web . thông số kỹ thuật mới (như các module CSS4 mới) tiếp tục bổ sung chức năng mát mẻ với animation, transforms, box shadow, và một sự hiểu biết sơ của đơn vị mới và bộ chọn là những thứ tuyệt vời, nhưng những người không phải là thuộc tính chúng ta sẽ được thảo luận dưới đây.

Với tất cả những sự nóng bỏng trong thế giới của CSS, đôi khi nó là hấp dẫn để đi sâu vào các kỹ thuật mới hơn cho ý tưởng về làm thế nào để thực hiện một thiết kế, nhưng có những thuộc tính thường bị bỏ qua trong kỹ thuật CSS mà cung cấp một số chức năng rất tiện dụng. Hãy tìm hiểu thêm.

1. CSS calc()

Calc () có lẽ là phổ biến nhất được sử dụng trong danh sách này, nhưng nó lại đáng được nhắc đến. Nếu bạn chưa bao giờ sử dụng nó, chỉ cần nghĩ về nó như nói, “I want this element to be this wide, minus this many pixels.”

.box {
  width: calc( 100% - 20px );
}

Điều này có thể trông giống như một cái gì đó mà phải ở trong một bộ xử lý như Sass, nhưng điều này là hoàn toàn tự nhiên và sử dụng kích thước render của trình duyệt của nguyên tố này trước khi làm toán.

Các yếu tố .box trên sẽ là "100% độ rộng trừ 20px." Điều này có thể được sử dụng cho nhiều mục đích như việc đưa các yếu tố cố định chiều rộng cùng với những người trong độ rộng biến.

2. The pointer media query

Trong khi không được hỗ trợ cũng như tôi muốn (~ 70%), truy vấn con trỏ phương tiện truyền thông có thể cực kỳ hữu ích. Hầu hết thời gian, các truy vấn phương tiện truyền thông đều dựa trên một phương pháp đơn giản: chiều rộng của cửa sổ trình duyệt. Nhưng có nhiều trường hợp khi chúng ta thà yêu cầu trình duyệt, "là người này sử dụng ngón tay của họ hoặc một con chuột?" Vì vậy chúng tôi có thể điều chỉnh kích thước nút của chúng tôi phù hợp.

@media( pointer: coarse) { }

None Các cơ chế đầu vào chính của thiết bị không bao gồm một thiết bị trỏ. Coarse Các cơ chế đầu vào chính của thiết bị bao gồm một thiết bị trỏ chính xác hạn chế. Ví dụ như màn hình cảm ứng và cảm biến chuyển động phát hiện Fine Các cơ chế đầu vào chính của thiết bị bao gồm một thiết bị trỏ chính xác. Các ví dụ bao gồm chuột, touchpad, và styluses vẽ. Support: Nó chưa phải là tốt, nhưng đang trở nên hoàn thiện hơn. đã hỗ trợ webkit, blink. Edge v..v

3. The currentColor variable

Giới thiệu với CSS3, biến currentColor có nguồn gốc CSS và đại diện, một cách dễ dàng, giá trị ”màu sắc" của phần tử hiện tại.

.card {
    color: #333333;
}
.card--error {
    color: #ff0000;
}
    .card__guts {
        border-top-color: currentColor; // see note below [1]
    }

4. The :valid, :invalid, and :empty pseudo classes

The :valid and :invalid pseudo classes được dùng để style validate các form input. Hầu hết ô input mới có khả năng dùng được thuộc tính valid và invalid. và đã hỗ trợ hầu các trình duyệt

input:valid { color: green; }
input:invalid { color: red; }

5. Counters using only CSS.

Nhu cầu tạo list danh mục nhưng ko dử dụng<ol>elements? hoặc không muốn sử dụng javascript, ko cần lo lắng, chúng ta có thể sử dụng CSS counters

.shelf { counter-reset: books; }
    .shelf__book { counter-increment: books; }
        .shelf__book::before {
            content: "Book " counter(books) " of 10.";
        }

Đôi khi CSS có vẻ vô lý. Đây là một trong những thời điểm. Không có biểu tượng cần thiết cho nối - chỉ cần ném một không gian trong đó.

6. Predictable tables with fixed layout

Tables, giá trị mặc định, trả rất nhiều sự chú ý đến nội dung của ô bảng của họ trong việc quyết định làm thế nào độ rộng sẽ được hiển thị. Thêm table-layout:fixed các bảng hiển thị một cách dễ quản lý hơn.

.grid {
    table-layout: fixed;
}

7. Easy form states using adjacent sibling selectors

Các anh chị em chọn liền kề là CSS rất cơ bản. Đó là một phần của tất cả các hướng dẫn người mới bắt đầu ra khỏi đó, nhưng nó không được sử dụng gần như đủ. Bằng cách tận dụng chọn này, nó đơn giản để làm nút trạng thái hoặc tin nhắn xác nhận hình thức xuất hiện khi cần thiết mà không cần javascript.

[type="checkbox"] + label {
    font-weight:normal;
}
    [type="checkbox"]:checked + label {
        font-weight:bold;
    }
[required]:valid + span { color: green; }
[required]:invalid + span { color: red; }

8. Algebraic nth-child() selection

Nth-child selectors rất tuyệt để xoá border của một phần tử nào đó trong list hoặc dòng nào đó trong một bảng. Nhưng đó chỉ là 1 phần của thuộc tính này, và nó rất hữu dụng ở những mục khác nhau. Vd chọn tất cả các phần tử thứ 4, bắt đầu từ 1