Bày tỏ IT

Một tut nhanh chóng. Đây là một cái gì đó đơn giản và tốt đẹp bằng cách sử dụng POWER của CSS ... nhưng khó khăn concieve (và chắc chắn không phải là tôi) để bắt đầu với. Thêm DropShadow, có thể là một mảnh bánh cho nhiều người trong chúng ta, bằng cách sử dụng một số công cụ chỉnh sửa hình ảnh như Photoshop và Fireworks.
Lý do tại sao, tôi đã lựa chọn hiệu ứng bóng đổ bằng cách sử dụng CSS, thường là trong khi tạo ra một thiết kế trang / html của một ứng dụng, yêu cầu giữ iterating. Những gì tôi có nghĩa là, một trang web hiện có với nhiều hình ảnh, giống như những hiển thị freinds danh sách hoặc thư viện hình ảnh, nó sẽ rất khó để tái xử lý toàn bộ tải trọng của hình ảnh đã được đã được dỡ xuống để thêm hoặc loại bỏ các bóng tối, cho rằng vấn đề.
Vì vậy, Nếu bạn đã làm được một chút suy nghĩ về phía trước trong khi tạo ra các HTMLS thêm các bộ phận phòng, hay thường tình hình là bạn có một logic vòng tạo ra các biểu tượng / hình thu nhỏ trong XSL, PHP. JAVA hoặc bất kỳ ngôn ngữ lập trình / kịch bản khác, bạn có thể thêm nó vào bất cứ lúc nào, sau đó chỉ là vấn đề của các hiển thị và ẩn các bóng tối bằng cách sử dụng tài sản hiển thị CSS, theo các khách hàng bao giờ thay đổi yêu cầu ... Tôi havn't làm điều này loại suy nghĩ về phía trước trước khi điều này ... nhưng ahev bắt đầu ngay bây giờ!

Trong ví dụ dưới đây, hình ảnh ban đầu là bóng tối miễn phí và dropshadows được áp dụng theo yêu cầu! CŨNG, tôi đã đi thêm một chút, bằng cách sử dụng các thủ đoạn của Tut trước đây của tôi (Well! này có thể là ngắn nhất của Hướng dẫn khác nhau, do đó, nó chỉ hợp lý gọi họ là "Tut" 's) Sử dụng tài sản Clip CSS cho hiện chỉ

Hình ảnh Gốc

CSS DropShadow Kết quả

Demo | Tải về sourcefiles

Đặt Stylesheets ở Top

Nếu bạn muốn có một trang để tải dần dần, có nghĩa là, chúng tôi muốn trình duyệt để hiển thị bất cứ nội dung của nó càng sớm càng tốt, đặt CSS ở trên cùng của trang bên trong tài liệu HEAD. Điều này làm cho các trang được tải nhanh hơn, vì điều này tạo điều kiện cho bản dịch tiên tiến của trang. Điều này đặc biệt quan trọng cho các trang với rất nhiều nội dung và người sử dụng trên các kết nối Internet chậm hơn.

Đó là một thực tế tài liệu đó để nâng cao kinh nghiệm người dùng chung, điều quan trọng là để cung cấp các chỉ số tiến bộ và phản hồi thị giác. Để tránh phải vẽ lại các yếu tố của trang, trong trường hợp nếu phong cách của họ thay đổi, một số trình duyệt, bao gồm IE, khối vẽ của trang cho đến khi CSS được nạp đầy đủ. Bởi vì điều này, người sử dụng là được nhìn thấy một trang trống màu trắng.

Thông số kỹ thuật W3 HTML, cũng nói rằng CSS, tôi phải bao gồm trong phần HEAD của trang HTML. at the bottom of the page, so it's best not to use it. Cũng lưu ý rằng, trong IE @import hoạt động giống như sử dụng <link> ở dưới cùng của trang, vì vậy tốt nhất là không sử dụng nó.

Tránh sử dụng các tính năng trình duyệt cụ thể

Bộ lọc: Sử dụng bộ lọc làm tăng tiêu thụ bộ nhớ và được áp dụng cho mỗi yếu tố, không phải cho mỗi hình ảnh, vì vậy vấn đề được nhân. Ngoài ra, Bộ lọc IE độc quyền, do đó sẽ không làm việc như dự định trong các trình duyệt khác. Nếu bạn muốn có nền trong suốt hoặc gradient, sử dụng 1Pixel với hình ảnh.
Biểu thức: các biểu thức CSS là một tính năng tốt đẹp để có trong CSS, nhưng vẫn là IE tính năng cụ thể. Ngoài ra, điều quan trọng là cần lưu ý rằng, những biểu thức đánh giá khi trang được trả lại và thay đổi kích cỡ, cuộn và ngay cả khi người dùng di chuyển con chuột trên trang. Không cần phải nói điều này có thể ảnh hưởng đến hiệu suất của trang của bạn. Do đó nói cách đơn giản, tránh sử dụng các biểu thức CSS, trừ khi bạn cảm thấy ưu điểm của nó nặng hơn so với các nhược điểm của nó '

Externalise bạn CSS

Sử dụng CSS bên ngoài sẽ dẫn đến tải nhanh hơn các trang bởi vì các tập tin JavaScript và CSS được lưu trữ bởi trình duyệt. CSS nội tuyến trong các tài liệu HTML được tải về tất cả các tài liệu HTML được yêu cầu. Điều này thực sự có thể làm giảm số lượng yêu cầu HTTP được thực hiện nhưng sau đó tăng kích thước của các tài liệu HTML. Bên ngoài CSS được lưu trữ bởi trình duyệt, kích thước của các tài liệu HTML được giảm mà không làm tăng số lượng yêu cầu HTTP.

Xin lưu ý rằng, nếu người sử dụng trên trang web của bạn có nhiều lượt xem cho mỗi phiên và nhiều của các trang của bạn lại sử dụng cùng một kịch bản và stylesheets, có một lợi ích tiềm năng lớn hơn từ các tập tin lưu trữ bên ngoài.

Đóng gói file CSS của bạn

Đóng gói hoặc crunching CSS của bạn là thực hành loại bỏ các ký tự không cần thiết từ mã giảm kích thước của nó do đó cải thiện thời gian tải.

CSS có thể tôi co rút bằng cách loại bỏ tất cả các ý kiến ​​và bất kỳ ký tự không mong muốn như các không gian màu trắng, dòng mới.

Thiết lập lại CSS / CSS để thiết lập một số các phong cách yếu tố cơ bản cụ thể mà tạo ra sự nhất quán trên các trình duyệt khác nhau.

Chúng tôi tất cả đã được thông qua những cơn ác mộng bằng văn bản qua trình duyệt CSS. Vì vậy, khi chúng tôi bắt đầu viết CSS của chúng tôi, là một thực hành để thiết lập lại nó đầu tiên để loại bỏ / đặt lại các mâu thuẫn bất kỳ trình duyệt chéo. CSS Đặt lại, vài đường nét đơn giản của CSS mà bạn bắt đầu CSS của bạn, cho bạn một nền tảng tốt để bắt đầu xây dựng của bạn khi.

Reset CSS mà tôi thường có xu hướng sử dụng trông như thế này

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
danh sách theo phong cách: không;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-trọng lượng: bình thường;
}

Thiết lập lại kích thước font chữ của trình duyệt
Đồng thời lưu ý các thiết lập lại đã được áp dụng cho kích thước font chữ của trình duyệt trong các dòng sau đây ...

html {font-size: 76%;}

Các reset CSS trên trình duyệt kích thước phông chữ là 10 pixels, và điều này làm cho nó có thể làm việc với cỡ chữ tương đối (đó là hàng quan trọng từ một tuân thủ WAI prespective)
Đối với ví dụ, định nghĩa sau đây, font-size trong một khoảng được thiết lập 10 pixels và trong paragarph được thiết lập đến 14 điểm ảnh ...

span {font-size: 1em;}
p {font-size: 1.4em;}

Ví dụ.
Chỉ định một tài sản CSS như thế này,

margin: 5px 0;

thực sự có nghĩa,

margin: 5px 0px 5px 0px;

Rằng tài sản ký quỹ đầu tiên có nghĩa là:

lề trên và dưới = 5px | | bên trái và lề phải = 0px

'còn viết tắt, sẽ là

margin: 5px 0px 5px 0px; (T, R, B, L)

thậm chí bạn có thể sử dụng 3 giá trị

margin: 5px 0 5px;

có nghĩa là

đầu = 5px bên phải và bên trái = 0px | | dưới = 5px

Internet Explorer tự động thêm padding để nút trong các hình thức HTML.
Không gian trải dài theo chiều dài của văn bản của nút.

Giải pháp là thêm tràn vào phong cách của nó .... tức là

. Nút {
overflow: có thể nhìn thấy;
padding-left: 10px quan trọng;
padding-quyền:! 10px quan trọng;
... Bất kỳ phong cách khác cho nút này ...
}

HOẶC

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;