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

Ilmari Heikkinen

Hôm qua tại văn phòng, chúng tôi đã nghĩ ra các thủ thuật CSS kỳ lạ và kỳ diệu. Hãy lấy ví dụ về trường hợp này, nó làm cho các liên kết trống hiển thị rất rõ ràng:

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

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);
}

Xem ví dụ trực tiếp tại jsFiddle

Nếu muốn có một kiểu khác cho các liên kết trỏ ra ngoài miền của bạn, bạn có thể sử dụng bộ chọn :not(). Đây thực sự là cách chúng tôi thực hiện các mũi tên nhỏ bên cạnh 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;
}

Xem ví dụ trực tiếp tại jsFiddle

Xin lưu ý rằng bạn không bị giới hạn ở việc định kiểu đường liên kết, sau đây là cách đảo ngược tất cả các hình ảnh PNG:

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

Chuyển từ bộ chọn thuộc tính, bạn có biết rằng mình có thể hiển thị phần đầ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 attr-hàm CSS để điền vào :after và :before nội dung.

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) "\" />";
}

Xem ví dụ trực tiếp tại jsFiddle

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