2008 2008年 04月 24日

最佳實踐:使用CSS

置於頂端的樣式表

如果你想一個頁面加載逐步的,我們希望瀏覽器顯示的任何內容,盡快付諸表決,在文檔的HEAD內頁的頂部的CSS。 這使得網頁出現被載入速度更快,這有利於逐步呈現的頁面。 很多內容和較慢的互聯網連接上的用戶頁面,這一點尤為重要。

這是一個記錄的事實,以提高整體用戶體驗,重要的是提供進度指標和視覺反饋。 為了避免重繪頁面元素的情況下,如果他們的風格變化,一些瀏覽器,包括IE,阻止頁面的渲染,直到CSS是滿載。 正因為如此,用戶是得到 一個空白頁。

W3的HTML規範“還規定,CSS,我必須包括在HTML頁面的HEAD部分。 at the bottom of the page, so it's best not to use it.還注意到@import行為,在IE瀏覽器使用的是相同<link>在頁面的底部,所以最好不要使用它。

避免使用特定功能的瀏覽器

過濾器:過濾器的使用 增加內存消耗,並且每個元素的應用,而不是每幅圖像,這樣的問題,乘以。 此外,過濾器是IE專有的,因此不會工作打算在其他瀏覽器。 如果你想透明或漸變的背景,用圖像1Pixel。
表現形式:CSS表達式是在CSS中有一個很好的功能,但仍然是IE瀏覽器的特定功能。 此外,重要的是要注意的是,這些表達式 評估時,頁面呈現和調整,滾動,甚至當用戶移動鼠標在頁面。 不用說,這可能會影響你的頁面的性能。 因此,在簡單的話,應避免使用CSS表達式,除非你覺得它的優點,重量超過其利弊'

外化你的CSS

使用外部CSS會導致更快的加載 ,因為是由瀏覽器的JavaScript和CSS文件緩存的網頁。 內嵌在HTML文檔中的CSS得到下載的HTML文件要求的時間。 這實際上可能降低的HTTP請求的數量,但後來增加了HTML文檔的大小。 外部CSS瀏覽器緩存的HTML文檔的大小沒有增加HTTP請求的數量減少。

請注意,如果您的網站上的用戶,每個會話有多個頁面訪問量和您的網頁重新使用相同的腳本和樣式很多,有更大的緩存外部文件的潛在利益。

包你的CSS文件

包裝或吱嘎你的CSS是從代碼中刪除不必要的字符,以減少其大小,從而提高加載時間的做法。

CSS可以我嘎吱嘎吱消除所有的意見和任何不必要的字符,如空格,換行符等


2008 2008年 4月 12日

CSS跨瀏覽器的最低高度哈克

發布的IE 6,MSIE中一直熱情地向我們UI開發人員加入幾個標準大多數其他標準的瀏覽器的CSS屬性。 這樣一個有用的屬性,在“最小高度”。 相當平直向前的財產,不需要長篇大論的解釋。 設置最小高度為表決時,它始終保留那一套高度時的內容,房屋佔地不到它可以容納更重要的(不同於單純的“高度”屬性)規模或在CSS的話,它的行為就像一個部門的“高度”設置為“自動”...

不可用性的“ 分高 ”,對於我們差一些開發商,他們仍然需要的CSS代碼,還必須努力在IE6,有時能證明表演塞... Donot絕望。

幸運的是,我們有足夠的怪癖,在IE中,我們會用出優勢,並通過攻擊我們的方式來達到我們的目標,即使一師師,雖然它的最小高度在IE6

解決方案1:使用下劃線哈克...閱讀更多 ]

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

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


解決方案2:使用CSS屬性選擇哈克

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

CSS屬性選擇哈克早期THA IE6的瀏覽器忽略的屬性約,選擇優勢。 注意另一個容器類=“SomeClass的”分工的要求。 只是這個師的階級屬性 presense,覆蓋高度歌劇,Mozilla和MSIE7的的汽車,後來。 在IE6,不支持屬性約選擇,忽略了它。

最小高度為IE6黑客演示



2008 2008年 4 4日

工作XSLT的XML節點屬性

如果您使用XML和XSL,那麼你有可能遇到的時間時,你必須發揮你的XSL XML節點的屬性和值。 它們負載對此嗦信息的網站,但我發現沒有一個簡短和精確的......這是沒有XML / XSL的教程,但我試圖把一些金手指列表的排序...

看起來像這樣的示例XML,我們將與...

<?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>

所以讓我們開始改變我們的上面的XML使用XSL

例1:顯示在選定的屬性值

<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結果會看起來像

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


例2:遍歷並顯示所有XML屬性名稱和值

<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結果會看起來像


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


下載上述所有文件(244下載)



觀看這個空間,我會不斷更新這一新的發現......


NDK的家 | 表達它 表示唇齶裂 表示Penmenship 表示敬畏 表達自己