人性化的细节处理
例如：
- textarea 默认只能垂直拖动，防止宽度改变破坏布局。
textarea {
resize: vertical; }- 汉字字号小于 12px 不易阅读，为
<small>元素设置默认值为 12px。
small {
font-size: 85.7%; /* 12/14=0.8571428571 */ }- label 元素默认光标设为「手型」，暗示此处可点击。
label {
cursor: pointer; }考虑移动设备
通常 iPhone 横屏时默认会放大文字，如果页面已经做了响应式，这可能会破坏布局，Neat.css做了如下优化：
html {
-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
考虑响应式
IE6 以上浏览器，图片默认支持缩放。
/**
* 1. 去除 IE6-9 和 Firefox 3 中 a 内部 img 元素默认的边框
* 2. 修正 IE8 图片消失bug
* 3. 防止 img 指定「height」时图片高度不能按照宽度等比缩放，导致图片变形
http://jsbin.com/aJoTUca/2 * 4. 让图片支持响应式 * 5. 去除现代浏览器图片底部的空隙 * 6. 修复 IE7 图片缩放失真 */ img { border: 0 none; /* 1 */ width: auto\9; /* 2 */ height: auto; /* 3 */ max-width: 100%; /* 4 */ vertical-align: top;/* 5 */ -ms-interpolation-mode: bicubic; /* 6 */ }
跨平台最佳 font-family
中文网页一直没有太多显示效果较好的字体可供选择，在「微软雅黑」之前，Windows 平台用于网页正文的简体中文字体仅有一个「中易宋体（SimSun）」。「微软雅黑」的出现似乎成了很多设计师的「救命稻草」。但「微软雅黑」自身也有诸多问题，例如：字距较小、字面宽扁、黑度偏大、字符重心不一致等。所以它实际上不适合用在大面积文字排版上，用在标题上尚可。
如果误认为「微软雅黑」就是网页显示最好的字体，甚至于把 OS X 默认简体中文也设置为「微软雅黑」（安装了 Office 后会预装「微软雅黑」），这将是很可怕的。
为了避免字体混乱的局面，Neat.css 统一了 font-family 的设置。
- 中文字体选择如下：
- Windows 优先使用「微软雅黑」，如果没有则使用「中易宋体（SimSun）」。
- OS X 优先使用「冬青黑体简体（Hiragino Sans GB）」，如果没有则使用默认的「华文黑体」。
- Linux 优先使用「文泉驿微米黑」。
- 西文字体选择如下：
- Windows 优先使用「Arial」。
- OS X 优先使用「Helvetica Neue」
/**
* 1. 防止元素中「font-family」不能继承
* 2. 西文字体和 OS X 字体写在前面
* 3. Opera 12.1 之前版本不支持中文字体的英文名称
* 4. 微软雅黑「\5FAE\8F6F\96C5\9ED1」,中易宋体「\5B8B\4F53」 */ body, button, /* 1 */ input, /* 1 */ select, /* 1 */ textarea /* 1 */ { font-family: 'helvetica neue',arial,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; }
注意：IE 中部分表单元素并不能识别以上 font-family 中的「微软雅黑」，会以「中易宋体（SimSun）」显示。
- 代码字体选择如下：
- Windows 优先使用 Consolas。
- OS X 优先使用 Monaco。
code,
kbd,
pre, samp { font-family: monaco, menlo, consolas, 'courier new', courier, monospace; }
如果开发者对所选字体没有充分了解，不建议重新定义 font-family
解决表单渲染问题
由于表单元素是由系统渲染的控件，其 UI 表现具有特殊性。为了尽可能减少不同平台间的差异，Neat.css 中统一了大部分效果，但保留一些平台特殊的样式。比如input[type="search"]，保留了搜索框右边的清除按钮，方便移动设备上清除文字。
/**
* 1.移除 OS X 中 Safari5 和 Chrome 搜索框内侧的左边距
* 2.如果需要隐藏清除按钮需要加上
input[type="search"]::-webkit-search-cancel-button
*/ input[type="search"]::-webkit-search-decoration /* 1 */ { -webkit-appearance: none; }
面向未来
Neat.css 中对一些浏览器的新特性也会提供支持，比如 HTML5 中新增的 <dialog> 元素。
/**
* 居中 HTML5 dialog 元素
* Chrome 31 支持，需开启 chrome://flags/#enable-experimental-web-platform-features
* Chrome 28 之前、Firefox 中不支持 height:fit-content;
https://src.chromium.org/viewvc/blink?revision=148314&view=revision * ::backdrop 定义遮罩样式 * @demo: http://jsbin.com/iPACab/1 */ dialog{ border: 1px solid; padding: 0; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; } dialog::backdrop{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .3); }
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
