Modern Web with CSS and CSS Grid (image with links inside)
Download as pptx, pdf0 likes412 views
本文件讨论了现代网页中的CSS及其网格布局，强调了CSS在创建响应式网页设计和提高用户体验中的重要性。文中还比较了流行的响应式框架，并介绍了CSS网格的优势，以及提升JavaScript与CSS性能的技巧。最后，涵盖了CSS性能优化方法和JavaScript事件循环的渲染原理。
Modern Web with CSS and CSS Grid (image with links inside)
- 1. Modern Web with CSS and CSS Grid Presenter: Alex Chen
- 2. 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
- 3. CSS Zen Garden:那麼, 這個站到底是? CSS 需要藝術家投以更嚴肅的眼光. Zen Garden 希望能刺激, 鼓勵, 並喚起大家的加入. 先來看看別人的設計吧, 隨便點選一 個, 然後將他們的風格套用到這個網頁. 網頁的內容還是一樣, 唯一改變的就是外部的 .css 檔. 真的, 相信我, 整個風格都變了, 只靠一個 .css 檔. CSS 賦予我們對HTML完全掌控的能力. 要讓大家驚豔, 相信這 些都是真的, 唯一的方法, 就是將這把雕刻刀交到藝術家們的手 上, 實際使用 CSS 來設計. 現在, 網路上已經充滿許多整齊, 美觀 的網頁.
- 4. Zen Garden Example: 1, Example 1 with CSS animation enable. 2, Example 2 layout like business page 3. CSS Zen Army layout
- 5. 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)
- 6. K8:
- 7. K8 變身 A8 使用一個 CSS File:
- 8. K8 變身 天空体育 使用一個 CSS File:
- 9. K8 變身 918 使用一個 CSS File:
- 10. K8 變身 冠军体育 使用一個 CSS File:
- 11. 響應式網頁設計 RWD 這是一項開始於2011年由Ethan Marcotte 發明的術語 2012年後被公認為是日後網頁設計開發技術的趨勢，網站使用CSS3，以百分比的方 式以及彈性的畫面設計 又稱適應性網頁、回應式網頁設計、多螢網頁設計. Example: LAT Website, SportsVip WebSite
- 12. RWD中斷點示意圖(break point) 電腦版裝置尺寸：1024px以上 ◆平板裝置尺寸：720px ~ 1024px之間 ◆手機板裝置尺寸：320px ~ 720px之間
- 13. Media Query: Mobile Vs Desktop First
- 14. Media Query: Min Width Vs Max Width
- 15. 熱門 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
- 16. BootStrap 4 Grid System
- 17. 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-)
- 18. 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.
- 19. Custom vs BS4 File Size in Total
- 20. CSS Minified with PurgeCSS
- 21. 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
- 22. CSS Grid
- 23. 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
- 24. 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: 彩票 电游 真人
- 25. CSS Grid Autoprefixer Plugin for IE11
- 26. 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.
- 27. Javascript and CSS Performance 像素管道 : JS / CSS > 样式 > 布局 > 绘制 > 合成 管道的每个部分都有机会产生卡顿，因此务必准确了解您的代码触发管道的 哪些部
- 28. 像素管道 1: Javascript / CSS 一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 Javascript 3rd Party Library 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里 添加一些 DOM 元素等. 还有其他一些常用方法也可以实现视觉变化效果，比如：CSS Animations、 Transitions.
- 29. 像素管道 2: 样式计算 Style 此过程是根据匹配选择器（例 如 .headline > .nav_item 或 .headline .nav > .nav__item）计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将 应用规则并计算每个元素的最终样式。
- 30. 像素管道 3: 布局 Layout 在知道对一个元素应用哪些规则之后，浏 览器即可开始计算它要占据的空间大小及 其在屏幕的位置。网页的布局模式意味着 一个元素可能影响其他元素，例 如 <body>元素的宽度一般会影响其子元 素的宽度以及树中各处的节点，因此对于 浏览器来说，布局过程是经常发生的。
- 31. 像素管道 4: 绘制 Paint 绘制是填充像素的过程。它涉及绘出文本、 颜色、图像、边框和阴影，基本上包括元素 的每个可视部分。绘制一般是在多个表面 （通常称为层）上完成的
- 34. 像素管道 Use Case 1 JS/CSS > 样式 > 布局 > 绘制 > 合成 如果您修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、 左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页 面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。
- 35. 像素管道 Use Case 2 JS / CSS > 样式 > 绘制 > 合成 如果您修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响 页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。
- 36. 像素管道 Use Case 3 JS / CSS > 样式 > 合成 如果您更改一个既不要布局也不要绘制的属性，则浏览器将跳到只执行合成。这个 最后的版本开销最小,例如动画.
- 37. 像素管道:堅守純合成器屬性和管理圖層數目 針對您的動畫，堅守transform和opacity變更。 以 will-change 或 translateZ 將移動元素升階。 避免過度使用升階規則；圖層需要記憶體和管理。
- 38. 像素管道: 要性能最佳 使用 transform 和 opacity 属性更改来实现动画 表現最佳的像素管道版本會避免版面配置和繪製，並只需要合成變更：
- 39. 像素管道: 使用 transform 和 opacity 属性更改来实现动画 為實現此目標，您需要堅守只需合成器即可處理的變更屬性。 時下只有兩個屬性才 是真的：transform 和 opacity ：
- 43. 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.
- 44. Q & A Welcome to ask any questions and give your feedbacks.