Sức mạnh tuyệt vời của CSS

Ilmari Heikkinen
X Trang chủ

Hôm qua tại văn phòng, chúng tôi đã nghĩ ra một số thủ thuật CSS kỳ lạ và kỳ diệu. Ví dụ: mã này giúp các đường liên kết trống rất dễ thấy:

a[href = ""] {
    background: red;
    color: white;
    font-size: x-large;
}

Hãy xem ví dụ trực tiếp tại jsFiddle

Bạn cũng có thể tạo kiểu cho đường liên kết tuyệt đối khác với đường liên kết tương đối:

a[href ^= http] {
    display: inline-block;
    color: red;
    transform: rotate(180deg);
}

Hãy xem ví dụ trực tiếp tại jsFiddle

Nếu muốn có một kiểu khác cho các đường liên kết trỏ ra ngoài miền của mình, bạn có thể sử dụng bộ chọn :not(). Đây thực sự là cách chúng tôi tạo các mũi tên nhỏ bên cạnh các đường liên kết ngoài tại HTML5Rocks.

a[href ^= 'http']:not([href *= 'html5rocks.']) {
    background: transparent url(arrow.png) no-repeat center right;
    padding-right: 16px;
}

Hãy xem ví dụ trực tiếp tại jsFiddle

Xin nhắc bạn rằng bạn không chỉ có thể tạo kiểu cho đường liên kết. Dưới đây là cách đảo ngược tất cả hình ảnh PNG:

img[src $= .png] {
    filter: invert(100%);
}

Tiếp theo phần bộ chọn thuộc tính, bạn có biết rằng bạn có thể hiển thị đầu tài liệu cùng với các phần tử khác ở đó không?

head {
    display: block;
    border-bottom: 5px solid red;
}
script, style, link {
    display: block;
    white-space: pre;
    font-family: monospace;
}

Hoặc bạn có thể sử dụng sức mạnh tuyệt vời của hàm thuộc tính CSS để điền nội dung :after và :before?

script:before {
    content: "<script src=\"" attr(src) "\" type=\"" attr(type) "\">";
}
script:after {
    content: "</script>";
}

style:before {
    content: "<style type=\"" attr(type) "\">";
}
style:after {
    content: "< /style>";
}

/* And for a finish, <link> */
link:before {
    content: "<link rel=\"" attr(rel) "\" type=\"" attr(type) "\" href=\"" attr(href) "\" />";
}

Hãy xem ví dụ trực tiếp tại jsFiddle

Xin lưu ý rằng attr() đọc các giá trị thuộc tính của phần tử trùng khớp, vì vậy nếu bạn sử dụng thuộc tính này cho #foo:before, thì thuộc tính này sẽ đọc các thuộc tính từ #foo.