RWD (1-3): CSS Pixels, Breakpoints, Responsive Images

  1. CSS Pixels vs. Physical Pixels
    1. CSS Pixels, the pixel the device reports to the browser
      • Pixel Ratio: For example, for iPad 4, the CSS Pixels is 768px width, but actually there are 1536px width physically (aka, Device Pixels). In this case, we call the iPad 4 has a 2 times Pixel Ratio. But the maths are not always so clean, say for iPhone 6 Plus, 414/1080 px
      • For commonly seemed CSS Pixels and Pixel Ratio, check mydevice.io/devices
      • For Windows computers, the “Scale and layout” settings will also produce a Pixel Ratio higher than 1.
    2. Device Pixels / Dots of Light / Physical Pixels
  2. Commonly Used Breakpoints
    // as most business is mobile first
    // it is better to write CSS for 
    // the smaller devices first
    @media (max-width: 575px) { ... }   // for phone mainly
    @media (min-width: 576px) { ... }   // for pad mainly
    @media (min-width: 768px) { ... }   // for pad or screen
    @media (min-width: 992px) { ... }   // for screen
    @media (min-width: 1200px) { ... }  // for screen
    // some people prefer to use the measurement of "em"
  3. Responsive Image
    // naming the layer as follows in Photoshop
    // when the assets is exported, we will have 3 .png files
    // as specified below. .jpge also works
    100x100 logo1x.png 200x200 logo2x.png 300x300 logo3x.png
    
    // for difference pixel ratios
    <figure>
      <img src="images/logo.png"
      srcset="images/logo1x.png 1x
      , images/logo2x.png 2x
      , images/logo3x.png 3x
      ">
    </figure>
    // or
    <img src="images/demo.jpg"
      sizes="(min-width: 64em) 50vw, (min-width: 35em) 75vw, 100vw"
      srcset="images/demo400.jpg 400w
        , images/demo700.jpg 700w
        , images/demo1000.jpg 1000w
        , images/demo1300.jpg 1300w"
      alt="demo"
    >
    // the above markup says:
    // if (min-width: 64em), the image should width 50vw
    // else if (min-width: 35em), the image should width 75vw
    // else (the last one's media query must be omitted), 100vw
    // assuming that the width is now 1024px (64em)
    // then the img width 50vw. In other word, 1024/2 px = 512 px
    // then, 400w one (400px) won't be enough and the least overkill one
    // is 700w (700px), and so the browser will choose the 700w one
    // to download and display, aks "images/demo700.jpg"
    //
    // special note: once a larger image is chosen 
    // Google Chrome won't load a smaller one
    // another way to do it is via clip (deprecated)
    
    // as only newer devices has a higher Pixel Ratio
    // it is better to do use .svg and <picture> element if possible
    <picture>
      <source srcset="amazing.svg" type="image/svg+xml">
      <img src="fallbackProgressive.jpg" alt="This will be shown if the image fails">
    </picture>
    

英文字体反FOUT的策略

由于(英文)字体下载需要一定的时间,主流浏览器会先用本地的字体来渲染文字,等到指定的字体下载好之后再渲染一次字体。用户会看到FOUT(Flash Of Unstyled Text)现象,影响体验。

个人认为最佳的解决方案是:1)首次访问用户,字体内联化并缓存字体;2)二次访问用户,调用缓存

@font-face {
  font-family: 'CustomFont';
  src: url(data:font/woff;charset=utf-8;base64,<base64 string>) format('woff');
  font-weight: 400;
  font-style: normal;
}

Windows 10自带base64编码解码命令行工具。

$ base64 --help

另外,相关的CSS规则font-display 浏览器支持得还不太好(2017.10)。

中文字体的好世代还没有到。

 

via CSS font-display: The Future of Font Rendering on the Web && Inline Web Font to Avoid FOUT

HTML知识拾遗(9-10):全局属性(Global attributes)之translate、tabindex,HTTP请求方法

  1. 全局属性
    <!-- translate -->
    <!-- yes表示该元素以及其子元素的innerText在本地化
      的时候需要被翻译,no反之 -->
    <p translate="yes">中文很美</p>
    <p translate="no">你也很美</p>
    <!-- tabindex -->
    <!-- 看MDN吧 -->
  2. HTTP请求方法
    OPTIONS,客户端要求服务器告知它所支持的请求方法
    GET,客户端要求服务器返回指定的数据(含响应头与数据主体)
    HEAD,客户端要求服务器仅返回响应头
    POST,客户端发送数据给服务器
    TRACE,网络诊断用,略
    PUT,客户端要求服务器写入/覆盖指定的数据
    DELETE,客户端要求服务器删除指定的数据

HTML知识拾遗(8):全局属性(Global attributes)之accesskey、contenteditable以及lang等

只涵盖部分,详见MDN

<!-- accesskey -->
<!-- 做大app的时候可能会用到,不同浏览器对accesskey的处理很不一样 -->
<a 
  href="http://www.foo.bar"
  accesskey="m"
>
 Try Pressing Alt and KeyM on Chrome
</a>
<!-- conteneditable -->
<!-- 下面是开发者常见的用法 -->
<data:text/html, <html contenteditable>
<!-- 网页内的用法 -->
<p contenteditable="true">
  Edit Me
</p>
<!-- dir -->
<!-- text direction,文本的方向,中文网页不怎么用的到吧 -->
<p dir="rtl">for Arabic</p>
<!-- spellcheck -->
<p spellcheck="true">chek for mistakes</p>
<!-- lang -->
<!-- 
  不妨参考清风轩的文章,或者上知乎。
  很多网友讨论得很学究。
  但是,W3C如何规定,跟搜索引擎怎么排名没有必然联系。
  (据说,)谷歌是不管lang属性的,百度估计也一样。
  但是,保守起见,抄你行业内的龙头老大的做法吧。
  另外,有些读屏软件会用到这个属性。
  最后,有的网站会在html上写lang属性,
  有的会在一个<meta>上写。
  PS,网上有不少过期信息,比如W3Schools
-->

<!-- 360的用例,这个是最认真的了 -->
<!Doctype html>
<!--[if lt IE 7 ]><html class=ie6 lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class=ie7 lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class=ie8 lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class=ie9 lang="zh-cn"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="modern" lang="zh-cmn-Hans"><!--<![endif]-->
 
<!-- 豆瓣 -->
<html lang="zh-cmn-Hans">
 
<!-- 维基百科中文版、淘宝、QQ.com的用例 -->
<html lang="zh-CN">
 
<!-- 百度、百度百科、京东、搜狐、新浪、网易、优酷、天猫的用例 -->
<!-- 我们没用啊 -->
 
<!-- 知乎、纽约时报中文网的用例 -->
<html lang="zh">
 
<!-- 注意,谷歌香港/台湾切换语言后,
  lang的值会变,不一一列举 
-->
<!-- 谷歌台湾 -->
<html lang="zh-TW">
<!-- 谷歌香港,繁体 -->
<html lang="zh-HK">
<!-- 谷歌香港、谷歌中文、FT中文网,简体 -->
<html lang="zh-CN">
 
<!-- 支付宝用例,好像搞错了吧, “en”? -->
<html lang="en">

GIF/斗图/表情包/emoji工具

流行的.gif格式:.gif格式是当前最流行的表情包格式。其实.webp等也可以,但是平台支持上不如.gif格式。

制作工具:.gif格式与.svg一样,可以通过Adobe Photoshop以及Adobe Illustrator来制作。另外,动态二维码一般也是用的.gif格式。

纯粹说.gif格式的工具没啥好说的,因此带上表情包一起说。

  1.  现成/库
    1. 站长素材 > 表情
    2. 斗图啦
    3. U表情包
  2.  在线制作
    1. 装逼神器 > 表情制作 by 随风博客
  3. 其他(非表情):
    1. 鬼畜字符生成器 by 孟坤工具箱
    2. Emoji Mosaic
    3. EmojiBuilder

好玩的前端(2):Stylish(CSS本地注入)

官方说明很好

Customize any website to your color scheme in 1 click, thousands of user styles with beautiful themes, skins & free backgrounds.

比起其他玩具,Stylish强大之处在于:
1)hackable:你可以用Stylish来给Stylish写样式,Cool
2)sociable:Stylish有强大的社区,你可以下载别人的样式表
3)ad-blockable:通过Stylish(display: none !important)来去广告的方法没有网站去屏蔽

我的CSS最初就是通过Stylish学的

 

Apple iPhone X网页设计事宜

  1. Designing Websites for iPhone X by WebKit.org
    <!-- iPhone X:启动全屏模式,注意设置相关的CSS规则! -->
    <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
    /* 放到最后 */
    /* iPhone X内置4个CSS4变量,下面用了两个 */
    @supports(padding: max(0px)) {
      .Specify_Your_Container_Class { 
        padding-left: max(12px, constant(safe-area-inset-left)); 
        padding-right: max(12px, constant(safe-area-inset-right)); 
      } 
    }

HTML知识拾遗(7):meta用例

  1. <meta>
    <!-- 自定义iOS Safari WebApp的名字。更多参考点我 -->
    <meta name="apple-mobile-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="NAME_YOUR_APP_HERE">
    <!-- viewport设置示例  -->
    <!-- 针对Chromium以及Safari iOS 9.2+ -->
    <meta
      name=viewport
      content="width=device-width
        , initial-scale=1"
    >
    <!-- 针对IE/Edge -->
    <meta
      name=viewport
      content="width=device-width
        , user-scalable=no"
    >
    /* 针对IE/Edge以及iOS 9.1 & - */
    html {
      -ms-touch-action: manipulation;
      touch-action: manipulation;
    }