Modern Web with CSS and CSS Grid (image with links inside)

Modern Web with CSS and
CSS Grid
Presenter: Alex Chen

Table Of Contents
1. Why Use CSS anyway?
2. Introduction of Responsive Web Design(RWD)
3. RWD Frameworks and Hand-made RWD Comparison
4. Introduction to CSS Grid
5. Javascript and CSS Performance Tuning

CSS Zen Garden:那麼, 這個站到底是?
 CSS 需要藝術家投以更嚴肅的眼光. Zen Garden 希望能刺激,
鼓勵, 並喚起大家的加入. 先來看看別人的設計吧, 隨便點選一
個, 然後將他們的風格套用到這個網頁. 網頁的內容還是一樣,
唯一改變的就是外部的 .css 檔. 真的, 相信我, 整個風格都變了,
只靠一個 .css 檔.
 CSS 賦予我們對HTML完全掌控的能力. 要讓大家驚豔, 相信這
些都是真的, 唯一的方法, 就是將這把雕刻刀交到藝術家們的手
上, 實際使用 CSS 來設計. 現在, 網路上已經充滿許多整齊, 美觀
的網頁.

Zen Garden Example:
 1, Example 1 with CSS animation enable.
 2, Example 2 layout like business page
 3. CSS Zen Army layout

Why Use CSS anyway?
 Cascading Style Sheets (CSS) is a language used most often to style and
improve upon the appearance of views. It allows for the separation of
presentation and content, and includes the characteristics of layouts,
colors and fonts. CSS builds upon HTML to make webpages more
interactive and appealing to the user.
 Case Demo: With or Without CSS with Google plugin in any website.
* https://modernweb.tw/agenda.html ( BS 4)
* https://www.easycard.com.tw/ (BS 3)
* https://www.cakeresume.com/ (BS 3)

K8 變身 A8 使用一個 CSS File:

K8 變身天空体育使用一個 CSS File:

K8 變身 918 使用一個 CSS File:

K8 變身冠军体育使用一個 CSS File:

響應式網頁設計 RWD
 這是一項開始於2011年由Ethan Marcotte 發明的術語
 2012年後被公認為是日後網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方
式以及彈性的畫面設計
 又稱適應性網頁、回應式網頁設計、多螢網頁設計.
 Example: LAT Website, SportsVip WebSite

RWD中斷點示意圖(break point)
電腦版裝置尺寸：1024px以上
◆平板裝置尺寸：720px ~ 1024px之間
◆手機板裝置尺寸：320px ~ 720px之間

Media Query: Mobile Vs Desktop First

Media Query: Min Width Vs Max Width

熱門 RWD FRAMEWORKS
Name Latest release License RWD Grid Features
No. of
columns
Bootstrap 4.3.1 (Feb 14, 2019)
MIT License
GitHub Star: 134K
Flexbox
Layout, typography, forms,
buttons, navigation, media
queries, .sass files, JavaScript
libraries. 2011 ~ now
default 12
Bulma
0.7.4 (February 8,
2019)
MIT License
GitHub Star: 35k
Flexbox
One and Only CSS File ; No
JavaScript needed. 2016 ~ now
default 12
Pure CSS
1.0.1
(July, 10, 2019)
BSD License
GitHub Star: 20K
Flexbox
A set of small, responsive CSS
modules that you can use in
web project 2013 ~ now
flexible
TailWind
1.0.5 ( February 23,
2019)
MIT License
GitHub Star: 13K Flexbox
A utility-first CSS framework for
rapidly building custom user
interfaces. 2017 ~ now
flexible

Bootstrap 4 Grid Break Point
 Extra small— <576px (col-)
 Small — ≥576px (col-sm-)
 Medium — ≥768px (col-md-)
 Large — ≥992px (col-lg-)
 Extra Large — ≥1200px (col-xl-)

Bootstrap V4 to V5
replace jQuery with vanilla JavaScript
 The famous 12-column system which is the
fundament of Bootstrap concept will almost certainly
stay with us in Bootstrap 5.

Custom vs BS4 File Size in Total

What is PurgeCSS?
 1, analyzes your HTML and CSS files.
 2. Matches the selectors used in HTML files.
 3. Remove unused selectors from your css.
 4. Result in smaller css files.
 5. Webpack ready: purgecss-webpack-plugin

CSS Grid Layout
CSS Grid Layout is the most powerful
layout system available in CSS; actually
initially introduced by Microsoft IE 10.
It is a 2-dimensional system, meaning it
can handle both columns and rows,
unlike flexbox which is largely a 1-
dimensional system

Can I use CSS Grid in IE 11?
 IE 11 supports CSS grid but with an outdated specification.
 Yes. F2E can use CSS grid in IE 11 with Autoprefixer plugin.
 For A8 PC project, FE has applied CSS Grid for display UI.
 Example for A8 PC pages that use CSS Grid that able to render in IE11:
 彩票
 电游
 真人

CSS Grid Autoprefixer Plugin for IE11

Can I use CSS Grid in H5 ?
 For current A8 H5 project, FE has applied CSS Grid in many UI layout.
 For H5, all browser, including UC Browser, now support standard CSS Grid spec
without needing to install any plugin.

Javascript and CSS Performance
像素管道 : JS / CSS > 样式 > 布局 > 绘制 > 合成
管道的每个部分都有机会产生卡顿，因此务必准确了解您的代码触发管道的
哪些部

像素管道 1: Javascript / CSS
 一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 Javascript
3rd Party Library 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里
添加一些 DOM 元素等.
 还有其他一些常用方法也可以实现视觉变化效果，比如：CSS Animations、
Transitions.

像素管道 2: 样式计算 Style
此过程是根据匹配选择器（例
如 .headline > .nav_item 或 .headline .nav
> .nav__item）计算出哪些元素应用哪些
CSS 规则的过程。从中知道规则之后，将
应用规则并计算每个元素的最终样式。

像素管道 3: 布局 Layout
在知道对一个元素应用哪些规则之后，浏
览器即可开始计算它要占据的空间大小及
其在屏幕的位置。网页的布局模式意味着
一个元素可能影响其他元素，例
如 <body>元素的宽度一般会影响其子元
素的宽度以及树中各处的节点，因此对于
浏览器来说，布局过程是经常发生的。

像素管道 4: 绘制 Paint
绘制是填充像素的过程。它涉及绘出文本、
颜色、图像、边框和阴影，基本上包括元素
的每个可视部分。绘制一般是在多个表面
（通常称为层）上完成的

像素管道 5:合成 Composite
由于页面的各部分可能被绘制到多层，由
此它们需要按正确顺序绘制到屏幕上，以
便正确渲染页面。对于与另一元素重叠的
元素来说，这点特别重要，因为一个错误
可能使一个元素错误地出现在另一个元素
的上层。

像素管道 Use Case 1
JS/CSS > 样式 > 布局 > 绘制 > 合成
 如果您修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、
左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页
面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。

JS / CSS > 样式 > 绘制 > 合成
 如果您修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响
页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。

JS / CSS > 样式 > 合成
 如果您更改一个既不要布局也不要绘制的属性，则浏览器将跳到只执行合成。这个
最后的版本开销最小,例如动画.

像素管道:堅守純合成器屬性和管理圖層數目
 針對您的動畫，堅守transform和opacity變更。
 以 will-change 或 translateZ 將移動元素升階。
 避免過度使用升階規則；圖層需要記憶體和管理。

像素管道: 要性能最佳
使用 transform 和 opacity 属性更改来实现动画
 表現最佳的像素管道版本會避免版面配置和繪製，並只需要合成變更：

像素管道:
使用 transform 和 opacity 属性更改来实现动画
 為實現此目標，您需要堅守只需合成器即可處理的變更屬性。時下只有兩個屬性才
是真的：transform 和 opacity ：

像素管道:
提升您打算设置动画的元素

像素管道:
管理层,并避免层数激增

像素管道效能
效能是避免非必要工作的藝術，請儘可能讓您的工作
高效率。在許多情況下，這在於善用瀏覽器，而非妨
礙它。

JavaScript Event Loop with CSS render
 Video Link : at 8:10 min secs.
 Javascript Event Loop: Main thread => Micro tasks (Promise) => Macro tasks
(setTimout) => render UI.

Q & A
 Welcome to ask any questions and give your feedbacks.

Modern Web with CSS and CSS Grid (image with links inside)

More Related Content

What's hot

Similar to Modern Web with CSS and CSS Grid (image with links inside)

Modern Web with CSS and CSS Grid (image with links inside)