Rich dynamic design with modern CSS

By Chen Hui Jing / @hj_chen

W3C
Chen Hui Jing
Jing
@hj_chen
🇲🇾 🏀 👩‍💻 📝 🦊
Evolution of browser capabilities for layout

Typesetting the web

Fonts on the web
CSS to do typography
Layout on the web
CSS to do layout

Font feature properties

font-kerning font-variant-position font-variant-position-ligatures
font-variant-numeric font-variant-caps font-variant-alternates

font-variant-east-asian

一个简体字可能对应多个繁体字,如简体字「发」,其相应的繁体字可能为「發」或「髮」;一个繁体汉字对应多个简体汉字的情况与前者相比数量极少但仍需注意,如繁体字「乾」可能对应简体字「干」或「乾」。繁简汉字的对应关系具体应由上下文决定。

Variable fonts

OpenType Variable font axes
Image credit: John Hudson
https://www.axis-praxis.org/

https://codepen.io/mandymichael/pen/YYaWop

CSS shapes: Basic shapes

Lollipop marshmallow lemon drops jujubes muffin fruitcake bonbon. Muffin carrot cake bear claw sweet roll tiramisu chocolate jelly beans toffee sweet roll. Biscuit candy sweet sweet powder tart bear claw. Tiramisu jelly beans apple pie donut topping dessert lemon drops gummies halvah.

Dessert pie dragée fruitcake chocolate oat cake donut muffin. Chocolate lemon drops cake muffin. Bonbon lemon drops chocolate fruitcake jujubes chupa chups sesame snaps sesame snaps pudding. Pastry chocolate jelly beans cake wafer.

Donut jelly toffee macaroon macaroon. Cookie sesame snaps chupa chups. Lollipop jelly lollipop brownie pastry gummi bears.

Gummi bears apple pie chupa chups jelly pie halvah pastry sweet. Cookie dessert sweet roll icing cheesecake macaroon wafer cheesecake. Toffee lemon drops apple pie fruitcake sweet roll chocolate cake jelly bear claw jelly. Donut tiramisu chocolate cake sesame snaps marshmallow tootsie roll candy canes cheesecake cotton candy.

Cake powder croissant lollipop cotton candy tiramisu lollipop tiramisu. Cookie candy canes gummies jujubes bonbon fruitcake ice cream gingerbread. Marzipan toffee carrot cake marshmallow danish cupcake jelly-o.

Halvah brownie lollipop. Chocolate cake marshmallow croissant muffin macaroon pastry. Gummies danish soufflé muffin gingerbread. Lollipop jelly cake croissant sesame snaps macaroon.

Biscuit gummies tart gingerbread wafer jujubes sweet roll. Wafer oat cake carrot cake liquorice chocolate bar chocolate cake jelly-o. Pastry donut oat cake. Fruitcake candy apple pie cake tootsie roll cotton candy candy canes. Halvah halvah chocolate jelly-o macaroon.

Macaroon dessert sweet roll dragée candy. Sweet cheesecake lemon drops. Sweet tart chocolate cake candy canes powder cotton candy. Apple pie danish chocolate cake danish bonbon. Muffin soufflé topping carrot cake chocolate. Macaroon toffee chupa chups sesame snaps gummi bears.

CSS Shapes: Shape from image

Beyoncé Giselle Knowles-Carter is an American singer, songwriter, dancer and actress. Born and raised in Houston, Texas, Beyoncé performed in various singing and dancing competitions as a child. She rose to fame in the late 1990s as lead singer of the R&B girl-group Destiny's Child.

http://adobe-webplatform.github.io/Demo-for-Alice-s-Adventures-in-Wonderland/

Support for writing-mode

Release of writing mode in various browsers

writing-mode property

horizontal-tb 从1987到现在
vertical-rl 从1987到现在
vertical-lr 从1987到现在
sideways-rl* 从1987到现在
sideways-lr* 从1987到现在
Properties marked with * have been deferred to Writing Modes Level 4.

text-orientation property

从1987到现在
mixed
1987到现在
upright
从1987到现在
sideways

text-combine-upright property

民國107年5月25日
none
民國107525
all
民國107525
digits <integer>*
古巴Cuba
愛沙尼亞共和國Estonia
列支敦斯登Liechtenstein

https://codepen.io/huijing/pen/bWzMEJ

https://codepen.io/huijing/pen/rrkvZa

CSS logical properties

Flex directions

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十四
20二十

CSS grid for ease of placement

Define your grid.

Define a grid

Place items in the grid.

Place items in the grid

Overlap elements

Vertical spacing

Leveraging media queries

Level 3

  • width
  • height
  • orientation
  • aspect-ratio
  • resolution
  • scan
  • grid
  • color
  • color-index
  • monochrome
  • device-width*
  • device-height*
  • device-aspect-ratio*

Level 4

  • update
  • overflow-block
  • overflow-inline
  • color-gamut
  • pointer
  • hover
  • any-pointer
  • any-hover

Level 5

  • light-level
  • environment-blending
  • scripting
  • inverted-colors
  • prefers-reduced-motion
  • prefers-reduced-transparency
  • prefers-contrast
  • prefers-color-scheme

Responsive images


  
  
  USWNT ticker-tape parade

https://penang-hokkien.gitlab.io

https://codepen.io/huijing/pen/xPEjWb

https://codepen.io/huijing/pen/QQGBjY

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Font used is Magnetic Pro, by MoTyFo