50 thủ thuật CSS không thể bỏ qua – part II

50 thủ thuật CSS không thể bỏ qua – part II

(tiếp theo phần trước)
50 thủ thuật CSS không thể bỏ qua – part I

11. HTML Hack cho IE

Một trong những cách viết CSS chỉ cho IE là sử dụng dấu * và _

.element {
	background: red; /* các trình duyệt hiện đại */
	*background: green; /* IE7 và các phiên bản thấp hơn */
	_background: blue; /* chỉ IE6 */
}

12. CSS Specificity

Khi một thành phần HTML có hai hoặc nhiều CSS selector áp dụng được vào nó và các selector này xung đột lẫn nhau thì chỉ một selector có specificity cao nhất được lựa chọn. Một chỉ số specificity có dạng (a,b,c,d), trong đó, nếu selector có:

1 element hoặc pseudo element:  d = 1 – (0,0,0,1) 
1 class, pseudo class hoặc attribute: c = 1 – (0,0,1,0)
1 id: b = 1 – (0,1,0,0)
inline style: a = 1 – (1,0,0,0)

Trong ví dụ dưới đây, chỉ số specificity tăng dần từ trên xuống dưới:

p: 1 element – (0,0,0,1)
div: 1 element – (0,0,0,1)
#sidebar: 1 id – (0,1,0,0)
div#sidebar: 1 element, 1 id – (0,1,0,1)
div#sidebar p: 2 elements, 1 id – (0,1,0,2)
div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)

13. Sửa lỗi min-height cho IE6

IE6 không hỗ trợ min-height. Tuy nhiên, nó lại làm việc với thuộc tính height như là với min-height ở các trình duyệt khác. Bạn có thể sử dụng đoạn CSS sau để áp dụng min-height cho mọi trình duyệt:

.element {
	min-height: 500px;
	height: auto !important;
	height: 500px;
}

Dòng đầu tiên sẽ set thuộc tính min-height cho các trình duyệt không phải IE6. Dòng cuối cùng sẽ thiết lập min-height cho IE6 do nó làm việc với height như min-height ở các trình duyệt khác. Dòng giữa với từ khóa !importantđảm bảo rằng các trình duyệt khác không lấy 500px làm giá trị của height.

Một cách khác thay thế nữa là dùng thuộc tính _height: IE6 hiểu _height như là height. Đoạn CSS sẽ trở nên ngắn gọn hơn:

.element {
	min-height: 500px;
	_height: 500px;
}

14. Base font-size

Sử dụng các đơn vị như ‘em’ hoặc ‘%’ cho font chứ là một cách tuyệt vời để tạo ra các thiết kế fluid. Bạn thiết lập font-size cho thẻ body, và các thành phần khác được đặt tương đối theo nó. Khi muốn thay đổi, phóng to, thu nhỏ toàn trang, bạn chỉ cần thay đổi font-size của body.

Để việc tính toán giá trị ‘em’ đối với các thành phần khác được đơn giản, hãy đặt font-size của body là 10px (~ 62.5% do font-size mặc định của các trình duyệt là 16px)

body {font-size:62.5%}
/* 10/16 = 62.5% */

h1 {font-size: 2.4 em}
/* 24px */

15. Style cho chữ cái đầu tiên của đoạn văn bản

Sử dụng pseudo-element :first-letter

p:first-letter {
	display: block;
	float: left;
	margin: 5px 5px 0 0;
	color: red;
	font-size: 1.4em;
	background: #ddd;
	font-family: Helvetica;
}

16. Text-transform

Bạn có thể hiển thị toàn bộ đoạn text dưới dạng chữ hoa, chữ thường hoặc chỉ chữ cái đầu tiên viết hoa với thuộc tính text-transform

p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}

17. Sử dụng CSS Reset

Các trình duyệt đều có các giá trị mặc định cho các thuộc tính CSS là khác nhau. Sử dụng CSS Reset để đảm bảo các giá trị mặc định này là như nhau với mọi trình duyệt. Tôi hay sử dụng YUI Reset CSS trong các project của mình.

18. Đặt ảnh làm bullet

Đôi khi bạn không muốn sử dụng các bullet HTML mặc định như disc, circle, square, mà thay vào đó là một ảnh đẹp hơn, ví dụ như ở hình dưới chẳng hạn.

bullet

Lúc đấy bạn có thể dùng CSS như sau:

ul {list-style: none}
ul li {
	background-image: url("path-to-your-image");
	background-repeat: none;
	background-position: 0 0.5em;
}

19. Cross-browser Opacity

.element {  
    filter:alpha(opacity=50);  
    -moz-opacity:0.5;  
    -khtml-opacity: 0.5;  
    opacity: 0.5;  
}

Trong đó:

  • opacity: CSS3
  • -moz-opacity: Mozilla Firefox
  • -khtml-opacity: các phiên bản cũ của Safari và các trình duyệt dùng khtml rendering engine
  • filter:alpha(opacity=50): Internet Explorer

20. Cross-browser Transition

transition: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
-ms-transition: none

Trong đó:

  • transition: CSS3
  • -moz-transition: Mozilla Firefox
  • -webkit-transition: Chrome
  • -o-transition: Opera
  • -ms-transition: Internet Explorer
Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!