Mặt cười có nghĩa là gì :).

Tôi phát hiện mã CSS này trong một dự án:

html, body { :)width: 640px;}

Tôi đã sử dụng CSS từ lâu nhưng tôi chưa bao giờ thấy mã ":)" này trước đây. Nó có nghĩa gì hay chỉ là một lỗi đánh máy?

Từ một bài viết tại javascriptkit.com , điều đó được áp dụng cho IE 7 và các phiên bản trước đó:

nếu bạn thêm một ký tự không phải là chữ và số như dấu hoa thị ( *) ngay trước tên thuộc tính, thuộc tính sẽ được áp dụng trong IE chứ không phải trong các trình duyệt khác.

Ngoài ra còn có một bản hack cho <= IE 8 :

div {
  color: blue;      /* All browsers */
  color: purple\9;  /* IE8 and earlier */
 *color: pink;      /* IE7 and earlier */
}

Tuy nhiên đó không phải là một ý tưởng tốt, họ không xác nhận. Bạn luôn cảm thấy thoải mái khi làm việc với các bình luận có điều kiện để nhắm mục tiêu các phiên bản cụ thể của IE :

<!--[if lte IE 8]><link rel="stylesheet" href="ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie-6.css"><![endif]-->

Nhưng đối với những người muốn xem hack thực sự, vui lòng mở trang này trong phiên bản IE mới nhất mà bạn có. Sau đó chuyển đến chế độ nhà phát triển bằng cách làm a F12. Trong phần Thi đua ( ctrl+ 8) thay đổi chế độ tài liệu thành 7và xem điều gì sẽ xảy ra.

Các tài sản được sử dụng trong trang là :)font-size: 50px;.

Nó trông giống như một bản hack CSS để nhắm mục tiêu IE7 và các trình duyệt trước đó. Mặc dù đây là CSS không hợp lệ và các trình duyệt nên bỏ qua nó, IE7 và trước đó sẽ phân tích và tôn trọng quy tắc này. Dưới đây là một ví dụ về hành động hack này:

CSS

body {
    background: url(background.png);
    :)background: url(why-you-little.png);
}

IE8 (bỏ qua quy tắc)

IE7 (áp dụng quy tắc)

Lưu ý rằng nó không phải là một khuôn mặt cười; BrowserHacks đề cập:

Mọi sự kết hợp của các ký tự này: [trước tên thuộc tính sẽ hoạt động trên] Internet Explorer 7
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

Ví dụ về hot dog GAH là ở đây .