HTML知识拾遗(5-6):video用例,input用例

  1. <video>用例
    <!-- 静音播放 -->
    <video 
      muted 
      autoplay playsinline webkit-playsinline
      src="film.mp4"
    ></video>
    <!-- playsinline是苹果专用,webkit-playsinline是它的legacy -->
  2. <input>用例
    <!-- 调用相机提供图像文件 -->
    <input type="file" accept="image/*" id="capture" capture="camera">
    <!-- 调用麦克风提供音频文件 -->
    <input type="file" accept="audio/*" id="capture" capture="microphone">
    <!-- 调用相机提供视频文件 -->
    <input type="file" accept="video/*" id="capture" capture="camcorder">

CSS知识拾遗(10-11):CSS像素与物理像素事宜

  1. 为什么要合并.css文件?
    因为,无论你的<link>元素里面的media属性如何声明,最新版本的主流浏览器都会下载你所有的<link>元素的src属性里面声明的CSS文件。
  2. CSS像素与物理像素(Physical Pixel)
    // 下面的HTML代码规定一个图像元素的宽度为“300 CSS像素”
    <img src="img.png" width="300"/>
    // 由于移动设备的物理像素越来越高,
    // 传统适用于桌面浏览器的像素在移动设备上看来会很小很小。
    // 因此,有了像素比(px ratio)
    // 解决方案有:
    // .svg方案(需fallback)
    <img src="img.svg" width="300" />
    // srcset属性方案(代码少)
    <img src="default.jpg" width="300" height="300"
      srcset =
        "hi.jpg 2x
        , uhi.jpg 3x"
    >
    // <picture>方案(最佳方案)
    <picture>
      <source 
        media="(max-width: 720px)"
        srcset="hd.jpg">
      <source 
        type="image/webp"
        media="(max-width: 720px)"
        srcset="hd.webp">
      <source
        media="(max-width: 1080px)"
        srcset="fhd.jpg">
      <source
        type="image/webp"
        media="(max-width: 1080px)"
        srcset="hd.webp">
      <source 
        src="default.jpg">
      <img 
        src="fallback.jpg" 
        alt="description on the image">
    </picture>
    // 如果浏览器不支持<picture>元素,它会使用它里面的<img>
    // 参考ResponsiveImages.org
    // background-position方案
    <div id="imageHost"></div>
    <style>
      #imageHost{
        background-image: url("default.jpg");
        background-repeat: no-repeat;
        background-position: 300px 300px;
      }
      @media
        (min-width: 720px)
      {
        #imageHost{
          background-position: 0px 0px;
        }
      }
    </style>
    // background: url("...") 方案
    <div id="img"></div>
    <style>
    #img{
      background-color: rgb(236,236,236);
      width: 300;
      height: 300;
    }
    #img{
      background: url("path/to/default.jpg") left top no-repeat;
    }
    
    /* 为确保兼容性 */
    @media
      (-webkit-min-device-pixel-ratio: 2)
    {
      #img{
        background: url("path/to/retina.jpg");
      }
    }
    @media
      (-min--moz-device-pixel-ratio: 2)
    {
      #img{
        background: url("path/to/retina.jpg");
      }
    @media
      (-o--moz-device-pixel-ratio: 2)
    {
      #img{
        background: url("path/to/retina.jpg");
      }
    }
    
    @media
       (min-resolution: 2dppx)
     {
       #img{
         background: url("path/to?retina.jgp");
       }
     }
    </style>
    // JS方案
    <img id="img" src="default.jpg" />
    <script>
      if(window.devicePixelRation >= 2){
        document.getElementById("img").src = "retina.jpg";
      }
    </script>
    // iOS专用方案
    #photoHostEl {
      background-image:
        -webkit-image-set(
          url("default.jpg") 1x
          , url("retina.jpg") 2x
     );
      width: 100px; 
      height: 100px;
    }
    // 让后端解决
    

QR Codes / 二维码工具

  1. 现成
    1. 付费( && 编辑器):第九工厂(艺术二维码模板)
    2. 付费( && 编辑器):草料二维码(二维码模板以及渠道统计)
  2. 编辑
    1. 本地
      1. .gif通用 && 付费:Adobe Photoshop
      2. .svg通用 && 付费:Adobe Illustrator
      3. 图片融合:Halftone QR Codes / Visual QR Code Generator
      4. JavaScript本地:qrcode.js
    2. 在线
      1. 图片融合:QArt Coder
      2. Google Chart API:
        <!-- 中国IP访问这个API的速度很慢 -->
        <img src="https://chart.googleapis.com/chart?chf=bg,s,ffffff&cht=qr&chs=120x120&chl=YOUR_CONTENTs&chld=|0" />
  3. 阅读器
    1. Chrome Extension:right-click QRcode reader
    2. iOS 11 Camera app
    3. (Android) Barcode Scanner
  4. 方案
    1. .gif动画QR Code(画质一般,性能一般,平台支持较好):
      1. 用Photoshop(的时间轴功能)制作/处理.gif文件,生成.bmp文件 >>
      2. 通过Visual Code Generator将.bmp文件们转化为二维码图片 >>
      3. 通过Photoshop将二维码图片们合成.gif文件
    2. .svg动画QR Code(画质最好,性能较差,平台支持较差):
      1. 用Photoshop(时间轴功能)制作/处理.gif文件,生成.bmp文件 >>
      2. 通过Visual Code Generator将.bmp文件们转化为二维码图片 >>
      3. 用Illustrator(的描边功能)将二维码图片们转换.svg文件们
      4. 通过文本编辑器或Illustrator将.svg文件们合并成一个.svg文件
      5. 通过CSS或者JavaScript来将.svg动画化

.WebP格式事宜

WebP格式事宜

  1. 简介:.WebP是谷歌公司研发的一种性能(文件大小)极其优越的开源图片格式。其性能的示例不妨参考又拍云的网页。
  2. 优点:
    • 无损压缩的压缩率高,有损的更高(代替.png以及.jpg)
    • 有损于无损的.WebP都支持透明背景(代替.png)
    • 支持动画(代替.gif)
    • 有免费的CLI图片转换工具
  3. 缺点:
  4. 建议:
    • 让Blink引擎浏览器的用户享受.webp格式带来的便利

HTML & CSS/SCSS/SASS工具

CSS

  1.  参考
    1. 原生CSS
      1. 在线:MDN || W3C || CSS参考手册 by Joy Du || cssreference.io || CSS Almanac by CSS-Tricks
      2. 专项类:Flexbox by CSS-Tricks
      3. hacks类:
    2. SCSS/SASS
      1. 在线:Sass-Lang Docs
    3. CSS Pixels
      1. 浏览器信息:mydevice.io ||  mydevice.io/devices
  2. 代码生成工具
    1. CSS Triangle Generator
    2. CSS matic的Gradient Generator以及Box Shadow (Generator)
    3. enjoycss.com的background、shadows、transition以及transform等工具
  3. 其他
    1. 浏览器CSS支持评分:css3test.org
    2. CSS4相关:css4 selectors

HTML

  1. 表格生成器:Tables Generator
  2. HTML压缩器:HTML Minifier
  3. 前端Checklist:Front End Check List

中文网页字体用例

传统类

  1. 动点科技
    font-family: "Helvetica Neue", Arial, Hiragino "Sans GB", "Microsoft Yahei", "微软雅黑", "Sans Serif";
  2. 凹凸实验室
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  3. Teambition
    font-family: -apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , "Segoe UI" , "Helvetica Neue", "PingFang SC", "Noto Sans" , "Noto Sans CJK SC" , "Microsoft YaHei" , "微软雅黑" , sans-serif;
  4. iVuew
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  5. 淘宝 / taobao.com
    font-family: tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;
  6. 知乎 / zhihu.com
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;
  7. 豆瓣 / douban.com
    font-family: Helvetica, Arial, sans-serif;
  8. Vice.cn
    font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", Roboto, "Microsoft YaHei", sans-serif;

    特色类

  9. 平面设计师何庭案(台湾)博客部分字体
    font-family: garamond, 'cwTeXMing', serif;

CSS后处理器postCSS等可以做什么

  1. minify颜色,如“white”变成“#fff”:csscolormin
  2. 一行写字体等:postcss-font
  3. 分析CSS的数据:postcss-cssstats
  4. 分析有没有使用目标浏览器不兼容的CSS规则:doiuse
  5. 自动生成视网膜屏的图片尾缀:postcss-at2x
  6. 分析有没有使用错误的颜色:css-colorguard
  7. 加vendor prefix(厂商前缀):autoprefixer
  8. 加hacks兼容老浏览器:
    1. cssgrace
    2. postcss-flexbugs-fixes
    3. postcss-opacity
    4. postcss-pseudoelements
    5. node-pixrem
    6. postcss-time-machine
  9. 合并CSS规则:postcss-merge-rules
  10. 丑化(uglify)CSS:cssnano
  11. 结合.html:
    1. 找到并去掉没有用到的CSS规则:uCSS
    2. 丑化class与id
    3. 精简筛选器(selector)
  12. 搞笑:postcss-chinese-stylesheets

.WebP格式的替补方案

  1. onerror法
    // 如果客户端不支持.webp,客户端会下.webp以及fallback的图片
    // 不推荐这种做法
    <img 
      src="img.webp"
      onerror="this.onerror=null; this.src='img.png';"
    />
  2. <picture> … </picture>法
    // 纯前端的推荐做法
    // 如果客户端不支持<picture>元素,会显示<img>
    // 如果客户端支持<picture>但是不支持".webp",
    // 还是会显示"img.jpg"
    <picture>
      <source srcset="img.webp" type="image/webp">
      <source srcset="img.jpg" type="image/jpeg">
      <img src="img.jpg" alt="Alt Info">
    </picture>
  3. Modernizr法
    // 如果你的页面使用了Modernizr.js
    // 那么,如果浏览器支持.webp格式,<img>会被加上一个叫“webp”的class,
    // 否则,会加上一个叫“no-webp”的class
    // 然后我们可以写这样的css:
    .webp{ background-image: url("img.webp"); }
    .no-webp{ background-image: url("img.jpg"); }
    // 另外,注意客户屏蔽了.js的情况

    有的CDN服务提供商会提供客户端类型自动识别的功能,CDN可以给.webp的时候会自动给用户
    我们也可以通过后端看用户发过来的Request Header来判断他/她的浏览器能否用“.webp”

网络图片工具

  1.  现成摄影类
    1. CC0:pixabay || MMT
    2. 免费:All The Free Stock || The Stocks  || LibreStock
  2. 现成模板类
    1. 免费:GraphicBurger
  3. 编辑
    1. 本地
    2. 在线:
  4. 压缩
    1.  参考:网站images.guide
    2. imagemin + 各种插件
    3. to .WebP && CLI & 开源:cwebp
    4. .png && CLI && 无损 && 开源:advpng(用zopfli算法)
    5. .jpeg && CLI && 有/无损 开源:cjepg
    6. img && GUI && 开源:Caesium
    7. .jpeg && GUI && 付费:JPEGmini Pro
  5. 辅助工具
    1. 图片占位符:placeholder.com || tool.lu

HTML知识拾遗(4):Cookies隔离

  1. Cookies隔离
    一个域名下的Cookies会在每次客户端与服务器的数据交换中被传递。
    很多情况下,Cookies的传递是没有意义的。比如页面上有30张同域的外链图片,那么客户要访问网站时,Cookies至少会被交换31次。这样碍害服务器性能,浪费服务器流量,甚至客户端也会有轻微影响。
    为了避免不必要的数据传输与运算,一般图片视频等资源会被放到另外一个域名下。