2008 2008年 04月 24日
置于顶端的样式表
如果你想一个页面加载逐步的,我们希望浏览器显示的任何内容,尽快付诸表决,在文档的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可以我嘎吱嘎吱消除所有的意见和任何不必要的字符,如空格,换行符等
没有评论 |标签: 最佳实践 , CSS 最佳实践 , CSS , 用户界面Desgin发布
2008 2008年 4月 12日
发布的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黑客演示
没有评论 |标签: IE浏览器错误 , IE修复 , IE浏览器黑客 , IE浏览器的问题 , IE6 , 教程 |张贴在CSS
2008 2008年 4月 4日
如果您使用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
下载上述所有文件(880下载)
观看这个空间,我会不断更新这一新的发现......
没有评论 |标签: 教程 , XML , XML属性 , XSL , XSLT |张贴在XSL中