网络的四面八方

@hj_chen

🇲🇾 🏀 👩‍💻 📝 🦊

🥑 Developer Advocate 🥑

早期的电脑都是在欧美国家研发的

早期的浏览器都注重西文文字的排版

运用中文字型的提示（一）

中文字型通常有上万个字符，系统字型依然比较实际
市场上的webfont服务：JustFont、有字库、文鼎云字库、華康字型
在@font-face规矩里先声明西文字型
用自定义字型，建议做一些子集化：字蛛、FontPrep、Font Squirrel

运用中文字型的提示（二）

注意系统字型是否用对了，SC vs TC
跟西文混排时要调整文本字号
别忘了调好行距，浏览器默认值太小了
在文本设尽量调整头尾对齐，可以用CSS调
把叙体的默认值换成normal
段落区隔可以设定在0.5em–1em之间

三十八年后。

汪淼觉得，来找他的这四个人是一个奇怪的组合：两名警察和两名军人，如果那两个军人是武警还算正常，但这是两名陆军军官。

汪淼第一眼就对来找他的警察没有好感。其实那名穿警服的年轻人还行，举止很有礼貌，但那位便衣就让人讨厌了。这人长得五大三粗，一脸横肉，穿着件脏兮兮的皮夹克，浑身烟味，说话粗声大嗓，是最令汪淼反感的那类人。

「汪淼？」那人问，直呼其名令汪淼很不舒服，况且那人同时还在点烟，头都不抬一下。不等汪淼回答，他就向旁边那位年轻人示意了一下，后者向汪淼出示了警官证，他点完烟后就直接向屋里闯。

「请不要在我家里抽烟。」汪淼拦住了他。

「哦，对不起，汪教授。这是我们史强队长。」年轻警官微笑着说，同时对姓史的使了个眼色。

「成，那就在楼道里说吧。」史强说着，深深地吸了一大口，手中的烟几乎燃下去一半，之后竟不见吐出烟来。

三十八年后。

汪淼觉得，来找他的这四个人是一个奇怪的组合：两名警察和两名军人，如果那两个军人是武警还算正常，但这是两名陆军军官。

「请不要在我家里抽烟。」汪淼拦住了他。

「哦，对不起，汪教授。这是我们史强队长。」年轻警官微笑着说，同时对姓史的使了个眼色。

「成，那就在楼道里说吧。」史强说着，深深地吸了一大口，手中的烟几乎燃下去一半，之后竟不见吐出烟来。

网络书写方向

网页汉字竖排

在宇宙间，一个技术文明等级的重要标志，是它能够控制和使用的微观维度。对于基本粒子的一线使用，从我们那些长毛裸体的祖先在山洞中生起篝火时就开始了，对化学反应的控制，就是在一维层次上操控微观粒子。当然，这种控制也是从低级到高级，从篝火到后来的蒸汽机，再到后来的发电机;现在，人类对微观粒子一维控制的水平已达到了顶峰，有了计算机，也有了你们的纳米材料。但这一切，都局限于对微观维度的一维控制，在宇宙间一个更高级的文明看来，篝火和计算机、纳米材料等等是没有本质区别的，同属于一个层次，这也是他们仍将人类看成虫子的原因。

网页西文竖排

Halt and Catch Fire

“Computers aren't the thing. They're the thing that gets us to the thing.”

“How did we all get here today? The choices we made, the sheer force of our will, something like that? Here's another answer... the winds of fate. Random coincidence, some unseen hand just pushing us along. Destiny.”

What are you searching for?

Creating CSS pencils

(Transforms edition)

Mark-up
Visual styles
Layout styles

1. Mark-up

This is a pencil
A CSS only pencil
Because why not


  
    This is a pencil
  
  
    A CSS only pencil
  
  
    Because why not

Mark-up is very basic. The additional p tag inside the list item is for styling purposes, because I only have two pseudo-elements (伪元素) to play with, and that's not enough for a pure CSS pencil.

纯CSS的三角形

.triangle {
  border-top: 18.75vmin solid transparent;
  border-bottom: 18.75vmin solid transparent;
  border-left: 18.75vmin solid #1e292f;
}

2. Visual styles

This is a pencil
A CSS only pencil
Because why not

3. Layout styles

This is a pencil
A CSS only pencil
Because why not

There are four 2D-transform (二维变形) functions available to us (旋转，缩放，倾斜或平移) and we'll use the rotate transform to get the pencils vertical. The tricky part about using transforms is that you have to keep in mind the transform-origin (变换原点), and how the browser deals with transforms to begin with.

变形元素时会发生什么事？

会在元素上创建新的本地坐标系（new local coordinate system）
不影响被变形元素周边的内容流
会产生层叠上下文（stacking context）

CSS书写模式

定义了CSS如何支持各种不同国际化语言的书写模式，例如拉丁（Latin）语系及印度（Indic）语系采用从左到右的书写模式，希尔伯特语（Hebrew）或阿拉伯语（Arabic）采用从右到左的书写模式，一些混合了拉丁语和阿拉伯语的文字可能采用双向书写（bidirectional），而一些东亚文字则需要竖排（从上到下）的书写模式。

`writing-mode` 属性

horizontal-tb	从1987到现在
vertical-rl	从1987到现在
vertical-lr	从1987到现在
sideways-rl*	从1987到现在
sideways-lr*	从1987到现在

有*印记的属性被延期到Level 4

This is what happens to your text when the different values of writing-mode are applied. The default is horizontal, top-to-bottom. To change the direction to vertical, we use vertical-rl or vertical-lr.

`text-orientation` 属性

从1987到现在

mixed

从1987到现在

upright

从1987到现在

sideways

`text-combine-upright` 属性

民國107年6月1日

none

民國107年6月1日

all

民國107年6月1日

digits <integer>*

Codepen example for text-combine-upright

古巴Cuba

愛沙尼亞共和國Estonia

列支敦斯登Liechtenstein

Creating CSS pencils

(writing-mode edition)

Mark-up
Layout and visual styles

1. Mark-up

This is a pencil
A CSS only pencil
Because why not


  
    This is a pencil
  
  
    A CSS only pencil
  
  
    Because why not

2. Layout styles

This is a pencil
A CSS only pencil
Because why not

3. Visual styles

This is a pencil
A CSS only pencil
Because why not

Luckily, we have an up-and-coming new player on team layout, CSS Logical Properties. What it does is use logical properties like block-start and block-end or inline-start and inline-end, which are relative to the block flow of the page, and allows the same code to be used regardless of writing mode.

逻辑方向

That's why we have a CSS Logical Properties specification. So instead of left or right (物理维度（尺寸）和方向), we use properties like block-start and block-end or inline-start and inline-end. So these directions continue to make sense, even if the writing mode of the document changes.

https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/

CSS逻辑属性和值

Moar pencils, please

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not


  
    
      This is a pencil
    
    
      A CSS only pencil
    
    
      Because why not
    
  

  
    
      This is a pencil
    
    
      A CSS only pencil
    
    
      Because why not
    
  

  
    
      This is a pencil
    
    
      A CSS only pencil
    
    
      Because why not
    
  

  
    
      This is a pencil
    
    
      A CSS only pencil
    
    
      Because why not
    
  
  
  
    
      This is a pencil
    
    
      A CSS only pencil
    
    
      Because why not
    
  

  
    
      This is a pencil
    
    
      A CSS only pencil
    
    
      Because why not
    
  

  
    
      This is a pencil
    
    
      A CSS only pencil
    
    
      Because why not
    
  

  
    
      This is a pencil
    
    
      A CSS only pencil
    
    
      Because why not

Mixed writing-modes?

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

单维布局

Flex-direction row — flex-direction: row

Flex-direction column — flex-direction: column

弹性布局转方向

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

This is a pencil
A CSS only pencil
Because why not

The property that controls the flow direction, is aptly named flex-direction, and with this, we can reorder flow of content. Again, I want to emphasise that this merely modifies the visual order and not the source order of the flex items. Screen readers and keyboard control will still respect source order.

二维布局行列之间的关系

插图从Brenda Storer的演讲Using CSS in the real world引用。

网格布局转方向

(以及调整项目密度)

Page 126 of Malerei, Fotografie, Film by Moholy-Nagy

Recreation of page 126 of Malerei, Fotografie, Film with grid and flexbox

原作：Moholy-Nagy, Malerei, Fotografie, Film

Grid和Flexbox并用

Self-alignment properties — These are not the borders you are looking for

Display flex on grid items — That's more like it

Grid和`mix-blend-mode`

Original colour diagrams by Charles Hayter, 1826

Colour diagrams recreated with CSS grid and blend-modes

原创：Charles Hayter

Grid命名的网格区域定义

Original Braun HiFi studio Anlagen poster

Braun HiFi studio Anlagen poster recreated with CSS

原创：Wolfgang Schmittel

利用`aspect-ratio`媒体检测

Grid、`writing-mode`、Flex等属性并用

原创：Drew Sullivan

viewport单位、`object-fit`、`:target`等属性

支持旧款浏览器

利用@supports，本地CSS功能检测

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}

Grid正式发布到现在，已经有大概两年的时间，浏览器的支持程度如今也高达88%，可以算是被广泛支持了。但是其它12%的用户该怎么办呢？其实CSS可以通过feature query做功能检测。它的语法类似media query，只是用的关键字是@supports。

我虽然提到grid当例子，但是feature queries可以用在任何一个CSS属性。@supports的支持率高达94%。浏览器不支持它也没关系，因为不认得@supports的浏览器就会忽视整个声明块内的CSS声明。

建议把回退样式写在前头，接下来的新属性包含在@supports规则内。运用这种渐进增强的实现方法好处就在于连运用旧款浏览器的用户，都可以顺利的浏览你的网页。