Bày tỏ IT

Đặ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.

Đăng IE 6, MSIE đã được loại, đủ cho chúng tôi giao diện người dùng phát triển bằng cách thêm một vài chi tiết tiêu chuẩn CSS tài sản hầu hết các trình duyệt tiêu chuẩn khác. Một trong những hữu ích sở hữu "chiều cao-min". Tài sản khá thẳng về phía trước mà không cần giải thích dài hơi. Khi min-height cho một bộ phận được thiết lập, nó luôn luôn giữ lại rằng chiều cao thiết lập khi nội dung đó nhà chiếm ít hơn nó có thể giữ và quan trọng (không giống như vani đồng bằng sở hữu "chiều cao") quy mô hoặc nói cách CSS, nó hoạt động như một bộ phận có "chiều cao" được thiết lập để "tự động" ...

Đối với một số người trong chúng ta phát triển nghèo, những người vẫn còn được yêu cầu mã CSS cũng phải làm việc trong IE6, bỏ sẵn có của "min-height", có thể chứng minh một stopper hiển thị đôi khi ... donot tuyệt vọng.

May mắn thay, chúng tôi có đủ quirks trong IE, chúng tôi sẽ sử dụng lợi thế ra và hack theo cách của chúng tôi thông qua việc đạt được mục tiêu của chúng tôi ... tức là làm cho một bộ phận PHÂN như là mặc dù chiều cao min trong IE6

Giải pháp 1: Sử dụng Hack gạch dưới [ ... Tìm hiểu thêm ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Giải pháp 2: Sử dụng các thuộc tính CSS Selector Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


Hack Lựa chọn các thuộc tính CSS có lợi thế của các trình duyệt trước đó tha IE6 bỏ qua atribute-chọn. Lưu ý các yêu cầu của một bộ phận container với lớp học "SomeClass" =. Chỉ cần sự hiện diện của các thuộc tính lớp cho bộ phận này, ghi đè chiều cao trở lại tự động cho Opera, Mozilla và MSIE7 và sau đó. IE6 không hỗ trợ chọn atribute, bỏ qua nó.

Xem Demo min-height hack cho IE6

Nếu bạn sử dụng XML và XSL, sau đó bạn có thể đã đi qua một thời gian, khi bạn phải chơi xung quanh với các thuộc tính và giá trị của các nút XML trong bạn XSL. Họ là vô số các trang web với thông tin về điều này hơi dài, nhưng không có tôi thấy ngắn gọn và chính xác ... Đây là NO Tutorial XML / XSL, nhưng cố gắng của tôi để đặt cùng một số loại danh sách cheat ...

Các mẫu XML mà chúng tôi sẽ làm việc với trông như thế này ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

Vì vậy, bạn bắt đầu chuyển đổi của chúng tôi trên XML sử dụng XSL

Ví dụ 1: Hiển thị giá trị tại một thuộc tính lựa chọn

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTML kết quả sẽ như thế

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

Ví dụ 2: Lặp qua và hiển thị tên tất cả các thuộc tính XML và giá trị của họ

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

HTML kết quả sẽ như thế


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Thêm bài này vào không gian này, tôi sẽ tiếp tục cập nhật với những phát hiện mới ...