Một điều đau đầu với những người làm việc với CSS đó là việc các trình duyệt (browser) hiển thị website theo cách không hề giống nhau. Điều này là do các định dạng mặc định (default styles) của mỗi browser khác nhau. Vậy, làm sao để hạn chế được thấp nhất các vấn đề có thể nảy sinh với browser khi làm việc với CSS. Có thể, bạn đã có lựa chọn của mình, ở đây sẽ có thêm 1 lựa chọn nữa cho bạn.
Với đoạn mã CSS dưới đây, bạn sẽ loại bỏ được gần như hoàn toàn những định dạng mặc định của các browser.
CSS:
/* Normalize padding and margins */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, th, td {
margin: 0;
padding: 0;
}
/* Normalize header sizes */
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
/* Normalize list styles */
ol, ul {
list-style: none;
}
/* Normalize font style and weight on odd elements */
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
/* Normalize table borders */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Normalize other borders */
fieldset, img {
border: 0;
}
/* Normalize text-alignment */
caption, th {
text-align: left;
}
/* Normalize (remove) quotation marks */
q:before, q:after {
content: '';
}
Chú ý: Với đoạn mã trên chỉ giúp bạn tránh được nhiều vấn đề gặp phải với CSS, nhưng không phải tất cả. Vì thế, khi gặp những vấn đề liên quan đến CSS, có lẽ Google là người trợ giúp tốt nhất.
Thứ Hai, 22 tháng 11, 2010
Kỹ thuật tải ảnh trước bằng CSS
Trong file CSS của bạn có sử dụng đến một số ảnh background, nhưng những ảnh đó sẽ không được trình duyệt tải về trong bộ đệm (cache) trên máy ngay từ đầu, mà khi nào sử dụng đến thì nó mới được tải về. Chính vì vậy đôi khi nó sẽ sinh ra độ trễ khi chúng ta lần đầu tiên khi vào trang Web.
Chúng ta lấy một ví dụ như sau: Giả sử rằng trong thẻ <a> của bạn có sử dụng hai ảnh, một ảnh làm dùng để hiển thị ngay từ đầu, còn một ảnh khác sử dụng cho thuộc tính :hover. KHi lần đầu tiên bạn vào Website khi hover chuột lên thẻ <a> đó thì nó sẽ không hiển thị anh thử hai ngay mà sau một khoảng thời gian khoảng 2 đến 3 giây sau thì mới hiện tùy theo tốc độ đường truyền.
Để khắc phục điều đó chúng ta có một thủ thuật (tips) nhỏ như sau:
Đối với một số ảnh mà chúng ta cần sử dụng làm background trong file css, mà chúng ta không muốn có độ trễ như ví dụ trên thì chúng ta cần có biện pháp tải trước những ảnh đó về máy.
Chúng ta sẽ đặt toàn bộ các ảnh mà muốn tải trước về vào trong một thẻ CSS như sau:
Bạn có thể đặt đoạn mã CSS trên vào trong file CSS của bạn, hoặc đặt vào trong thẻ <head> của trang. Ví dụ
Sau đó chúng ta đặt đoạn thẻ <div id="prLoadImages"> trên vào ngay dưới thẻ <body> củaWebsite của bạn. Khi trình duyệt đọc tới thẻ <div> đó nó sẽ load toàn bộ những ảnh được liệt kê trong danh sách trên vào trong bộ đệm của trình duyệt.
Đăng ký:
Nhận xét (Atom)