CSS——几个最新解决方案

时间 2019-11-11

标签 css 几个最新解决方案栏目 CSS 繁體版

原文原文链接

　　1、重置默认样式
　　　　normalize.css
　　　　　　①不像其余CSSreset，它保存了一些有用的默认样式。
　　　　　　②规范了大量样式，纠正了一下bug与表现形式。
　　　　　　③有详细的注释解释代码的做用。javascript

　　2、清除浮动css

　　　　/* 现代浏览器: */
　　　　　　　　　　　　.cf:before, .cf:after {content:""; display:table;}
　　　　　　　　　　　　.cf:after {clear:both;}
　　　　/* For IE6-7: */
　　　　　　　　　　　　.cf {*zoom:1;}

　　　　★使用overflow:hidden;清除浮动的弊端：
　　　　　　①当窗口小于容器时，无滚动条，隐藏内容与子元素。
　　　　　　②干扰margin、border、outline 和绝对定位的png图片。
　　　　　　③影响CSS3属性的应用，如box-shadow、text-shadow、transform等。
　　　　　　　　【即便非得使用，也应该确保触发hasLayout——zoom:1;】html

　　3、图片替代文字
　　　　Kellum方法：在隐藏文本的同时保留了文本在屏幕内。而不是之前的-9999px(hack)。前端

　　　　.hide-text {
　　　　　　text-indent: 100%;
　　　　　　white-space: nowrap;
　　　　　　overflow: hidden;
　　　　}

　　　　提升性能，特别是平板电脑或小屏幕设备。html5

　　4、图标元素
　　　　当须要设置一个元素的背景图片，做为一个图标显示时，比起<span>等元素，<i>元素更具语义。java

　　5、使用CSS3
　　　　CSS3有两个消极点：许多规范未肯定须要前缀；旧浏览器不支持。
　　　　（1）CSS3兼容性
　　　　　　CSS3新属性最新支持列表：css3

　　　　　　经过JavaScript插件实现IE6~IE9对CSS3特性的支持：
　　　　　　　　①IE9.js.这里有一个IE9.js影响的属性和问题修正的解释。
　　　　　　　　②Selectivizr
　　　　　　　　③CSS3 Pie
　　　　　　　　④CSS Sandpaper
　　　　　　　　⑤Modernizr
　　　　　　虽然增长了页面的大小和加载事件，但这个代价值得。
　　　　（2）CSS3工具
　　　　　　查看HTML5与CSS3最新规范与支持度：http://html5please.com、http://css3please.com/
　　　　　　渐变工具：Ultimate CSS Gradient Generator
　　　　　　W3cplus整理了九十多个前端工具：《前端工具》 git

　　6、流体图片【经常使用于响应式布局】github

　　　　img { max-width: 100%; height: auto; }

　　7、HTML5文档声明浏览器

　　　　<!DOCTYPE html>

　　　　HTML5的文档声明能快速改变页面模板和实现文档重构。
　　　　在IE6~IE8用条件注释引入脚本<HTML5-Shiv>，可以使旧浏览器正确呈现元素。

本文整理自：http://www.w3cplus.com/css/css-architectures-new-best-practices.html