• 相关css 细节处理 neat.css


    人性化的细节处理

    例如:

    • 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: auto9; /* 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 的设置。

    1. 中文字体选择如下:
    • Windows 优先使用「微软雅黑」,如果没有则使用「中易宋体(SimSun)」。
    • OS X 优先使用「冬青黑体简体(Hiragino Sans GB)」,如果没有则使用默认的「华文黑体」。
    • Linux 优先使用「文泉驿微米黑」。
    1. 西文字体选择如下:
    • Windows 优先使用「Arial」。
    • OS X 优先使用「Helvetica Neue」
    /**
     * 1. 防止元素中「font-family」不能继承
     * 2. 西文字体和 OS X 字体写在前面
     * 3. Opera 12.1 之前版本不支持中文字体的英文名称
     * 4. 微软雅黑「5FAE8F6F96C59ED1」,中易宋体「5B8B4F53」
     */
    body,
    button, /* 1 */
    input, /* 1 */
    select, /* 1 */
    textarea  /* 1 */
    {
        font-family: 'helvetica neue',arial,'hiragino sans gb',stheiti,'wenquanyi micro hei',5FAE8F6F96C59ED1,5B8B4F53,sans-serif;
    }
    

    注意:IE 中部分表单元素并不能识别以上 font-family 中的「微软雅黑」,会以「中易宋体(SimSun)」显示。

    1. 代码字体选择如下:
    • 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);
    }
  • 相关阅读:
    [BZOJ]2132: 圈地计划 最小割
    从最近MySQL的优化工作想到的
    Linux基本操作 9----- 认识与学习bash
    多路径配置vlome group共享存储,VG的更新。
    两位数乘法的速算方法(一)
    请对他有足够的重视——设计!
    ASP.NET中配置应用程序
    flex开发小技巧集锦
    刚制作完的SAP Sybase ASE15.7 [Sybase Central] 客户端
    Static 关键字的 5 种用法,你会几种?
  • 原文地址:https://www.cnblogs.com/sybboy/p/5087975.html
Copyright © 2020-2023  润新知