50 Thủ thuật CSS không thể bỏ qua – Part 2

Tiếp theo bài trước, hôm nay chúng ta sẽ nghiên cứu thêm một số thủ thuật css nhỏ nữa. Nó đơn giản nhưng lại dễ quên nếu không hay dùng, vì vậy mình tổng hợp lại để một ngày nào quên thì lôi ra đọc...

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. Sửa lỗi min-heigth 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;
}

 

13. 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 */

 

14. 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;
}

 

15. 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}

 

16. 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.
 

17. Đặ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.
 
 
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;
}

 

18. Cross-browser opacity

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

Trong đó:

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

19. Cross-browser transition

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

 

Trong đó:
 
  1. transition: CSS3
  2. -moz-transition: Mozilla Firefox
  3. -webkit-transition: Chrome
  4. -o-transition: Opera
  5. -ms-transition: Internet Explorer

50 Thủ thuật CSS không thể bỏ qua – Part 1

Related Post


50 Thủ thuật CSS không thể bỏ qua – Part 1
Friday, March 28, 2014
Dưới đây là 50 thủ thuật CSS hữu dụng mà các nhà thiết kế web không thể bỏ qua. Một số thủ thuật có thể mới mẻ, số khác lại đã quen thuộc với bạn. Tuy nhiên rất mong các bạn tìm thấy những điều bổ ích qua bài viết này.
Tạo responsive cho facebook comment plugin
Monday, March 24, 2014
Hiện nay facebook comment plugin đang được tích hợp vào website khá phổ biến vì nó dễ sử dụng và quản lý, giúp website được chia sẻ nhanh trên mạng xã hội. Tuy nhiên với xu thế thiết kế web responsive hỗ trợ cho nhiều thiết bị như hiện nay, việc tích hợp plugin này vẫn còn vướng mắc một vấn đề là plugin này của facebook chỉ hỗ trợ kích thước có định mà chưa tự động co dãn theo giao diện web của bạn.
Search

Đăng ký nhận bài mới


Category

Blog Archive