者:vivo 互聯(lián)網前端團隊 - Zhang Jiqi
本文主要講述了CSS中的級聯(lián)層(CSS@layer),討論了級聯(lián)以及級聯(lián)層的創(chuàng)建、嵌套、排序和瀏覽器支持情況。級聯(lián)層可以用于避免樣式沖突,提高代碼可讀性和可維護性。
一、什么是級聯(lián)層(Cascade Layers)?
1.1 級聯(lián)層的官方定義
我們參看Cascading and Inheritance Level 5(13 January 2022) 中6.4節(jié)所述:
級聯(lián)層提供了一種結構化的方式來組織和平衡單個起源中的問題。單個級聯(lián)層內的規(guī)則級聯(lián)在一起,不與層外的樣式規(guī)則交錯。
開發(fā)者可以創(chuàng)建層來表現(xiàn)元素默認值、第三方庫、主題、組件、覆蓋和其他樣式問題,并且能夠以顯式方式重新排序層級,而無需更改每個層內的選擇器或特異性,或依賴源順序來解決跨層的沖突。
單純看官方定義和概括可能比較晦澀,下面我們會結合案例來說清楚。
1.2 級聯(lián)層為了解決什么問題?
簡而言之:級聯(lián)層的出現(xiàn)就是為了使 CSS 開發(fā)者可以更簡單直接地控制級聯(lián)。
我們來假設日常開發(fā)中的一個場景,從場景去理解級聯(lián)層在解決什么問題。
如下圖:
我們原來的'display'文案是紅色,當我們引入了一個第三方組件庫,第三方庫中有以下樣式。
/* 開發(fā)者樣式 */
.item {
color: red;
}
/* 第三方庫 */
#app .item {
color: green;
border: 5px solid green;
font-size: 1.3em;
padding: 0.5em;
width: 120px;
}
就會導致'display'文案變成綠色。
我們想要將'display'文案的顏色由綠色改成紅色一般的手段是增加選擇器特異性(優(yōu)先級)。比如在開發(fā)頁面中對開發(fā)者樣式進行修改:
/* 開發(fā)者樣式 */
#app div.item {
color: red;
}
/* 第三方庫 */
#app .item {
color: green;
border: 5px solid green;
font-size: 1.3em;
padding: 0.5em;
width: 120px;
}
或者借助級聯(lián)中出場順序對優(yōu)先級的影響在用戶頁面中重寫
/* 第三方庫 */
#app .item {
color: green;
border: 5px solid green;
font-size: 1.3em;
padding: 0.5em;
width: 120px;
}
/* 開發(fā)者樣式 */
#app .item {
color: red;
}
效果如下:
再舉個例子:
比如有可能第三方組件寫了
a { color: blue; }
那項目開發(fā)中由于引入這個第三方組件 就會導致樣式污染,因為第三方庫的樣式往往都在項目設置的通用樣式比如common.css后加載。
如果后面想在代碼中覆蓋某些屬性,使用高特異性選擇器的語句就可能會導致問題。然后因為有問題就會選擇更高特異性的擇器的語句或使用!important,這會使代碼變得冗長也可能會帶來副作用。低特異性選擇器的語句很容易被后面出現(xiàn)在代碼中的語句覆蓋。在自己的代碼之后加載第三方 CSS 時特別會出現(xiàn)這種問題。
所以級聯(lián)層就是為了解決以上場景出現(xiàn)的,級聯(lián)層在級聯(lián)中的的位置是在內聯(lián)樣式和選擇器特異性之間。當有些css聲明就是設置要低優(yōu)先級且不受選擇器特異性影響那么使用級聯(lián)層再合適不過。
運用級聯(lián)層解決第一個日常開發(fā)場景痛點的css代碼如下:
/* 排序層 */
@layer reset, lib;
/* 通用樣式 */
@layer reset {
#app .item {
color: black;
width: 100px;
padding: 1em;
}
}
/* 第三方庫樣式 */
/*我們將第三方庫的樣式全部放到lib層*/
/*這里一般使用@import導入的方式*/
/*為了示例簡單我們簡化了操作*/
@layer lib {
#app .item {
color: green;
border: 5px solid green;
font-size: 1.3em;
width: 130px;
}
}
/* 開發(fā)者樣式 */
.item {
color: red;
}
為了知道為什么上面的css代碼能解決沖突問題,更好地理解級聯(lián)層的作用,理解一些現(xiàn)象背后的根因,了解級聯(lián)層和級聯(lián)的關系,我們繼續(xù)往下看。
二、理解級聯(lián)層的前提——級聯(lián)(cascade)
2.1 什么是級聯(lián)?
CSS中有兩個重要的基礎規(guī)則,一個是繼承,一個是級聯(lián)。
繼承
指的是類似 color,font-family,font-size,line-height 等屬性父元素設置后,子元素會繼承的特性。
級聯(lián)
可以簡單理解為是CSS 用來解決要應用于元素的具體樣式的算法。也就是基于一些優(yōu)先級排序輸出給給定元素上屬性值一個級聯(lián)值。級聯(lián)值是級聯(lián)的結果。
2.2 當前級聯(lián)的排序標準
我們參看Cascading and Inheritance Level 5(13 January 2022) 中6.1節(jié),
相比于Cascading and Inheritance Level 4(14 January 2016) 中的定義有明顯變化。
最重要的變化就是增加了級聯(lián)層。由此級聯(lián)排序變成:
瀏覽器在確定最終元素樣式呈現(xiàn)的時候,會依據(jù)這些準則按照優(yōu)先權從高到低排序,并且會一個一個的檢查,直到確定最終樣式。
2.3 級聯(lián)起源(Cascading Origins)
2.3.1 三個核心起源
css中每個樣式規(guī)則有三個核心起源,它決定了它進入級聯(lián)的位置,理解起源優(yōu)先級是理解級聯(lián)的關鍵。
2.3.2 起源的優(yōu)先級
Css聲明的起源取決于它來自哪里,重要性在于它是否用!important聲明。
各種起源的優(yōu)先級按降序排列:
越靠前來源的聲明優(yōu)先級越高。過渡和動畫我們可以暫時忽略。
2.4 熟悉又陌生的 !important
通常作為開發(fā)者,!important會被我們視為一種增加特異性的方法,用以覆蓋內聯(lián)樣式或特異性較高的選擇器。
但是!important設計出來的初衷是作為整體級聯(lián)中的一個特性,來平衡開發(fā)者、用戶設置和瀏覽器內置之間對css優(yōu)先級的影響能力。
默認情況下三者的優(yōu)先級是:作者來源> 用戶來源>用戶代理來源(可以參看上文起源優(yōu)先級中6-8的排序)。但是當css聲明添加!important之后會使它們的優(yōu)先順序顛倒(參看上文起源優(yōu)先級中2-4的排序)。
如果站在瀏覽器和用戶的角度看!important提供了在必要時重獲優(yōu)先級控制權的能力,而非只是簡單的增加特異性。
舉個例子:
瀏覽器默認樣式表包含我們開發(fā)者無法覆蓋的重要樣式。
瀏覽器對具有'hidden'類型的input輸入框設置了默認的展示屬性并且將其聲明為重要。
input[type=hidden i] { display: none !important; }
看下面兩張圖例:
第一張可以看出我們對具有'hidden'類型的input輸入框的展示屬性設置成了顯示并且聲明為重要
第二張是樣式最終計算結果:隱藏
從上面的瀏覽器表現(xiàn)可以看到我們作為開發(fā)者在作者樣式表中設置的規(guī)則沒能覆蓋用戶代理樣式表中的相同規(guī)則。
這驗證了上面說的:在級聯(lián)中!important會顛倒三大核心起源默認優(yōu)先順序。
驗證的過程中還發(fā)現(xiàn)了一個chrome控制臺這邊的bug,看上面的第一張圖例:沒生效的規(guī)則不劃刪除線,生效的反而劃刪除線了。
再看一個官方文檔的例子加強一下理解:
圖片來源:w3.org
font-size的值最終是‘12pt ’。
因為作者樣式表中添加!important的規(guī)則優(yōu)先權高于用戶樣式表中普通規(guī)則。
text-indent的值最終是‘1em’。
因為雖然兩個樣式表都標注了!important,但是標注!important用戶聲明優(yōu)先級大于標注!important作者聲明。
2.5 一張圖帶你理解級聯(lián)
下圖可以幫助我們直觀的理解級聯(lián)以及級聯(lián)層在級聯(lián)中的位置:
圖片來源:css-tricks
我們會發(fā)現(xiàn)平時操作最多的選擇器特異性(selector specificity)只是級聯(lián)中的一小部分。也輕松地理解了為什么內聯(lián)樣式優(yōu)先級天然高。同時我們會發(fā)現(xiàn)!important在級聯(lián)中有特殊地位。他穿插在級聯(lián)規(guī)則的各個階段并能顛倒優(yōu)先級。
三、級聯(lián)層(CSS@layer) 使用探索
3.1 @layer 是什么?
我們來看MDN上的定義:
The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.
也就是說 @layer 這個at-rule(AT規(guī)則) 用于聲明級聯(lián)層(cascade layer),也能用于定義多個級聯(lián)層的優(yōu)先級。
At-rules 是什么?
At-rules是指導 CSS 如何表現(xiàn)的CSS 語句。它們以 at 符號 ' @' ( U+0040 COMMERCIAL AT) 開頭,后跟一個標識符,包括下一個分號 ' ;' ( U+003B SEMICOLON) 或下一個CSS 塊之前的所有內容。
我們開發(fā)常見的at-rule有@charset、@media、@font-face 、@keyframes 等。
3.2 @layer的句法規(guī)則
@layer的句法如下:
@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}
3.3 如何創(chuàng)建級聯(lián)層
可以通過多種方式創(chuàng)建級聯(lián)層。
第一種方法是:創(chuàng)建命名的級聯(lián)層,其中包含該層的 CSS 規(guī)則,如下所示:
@layer green {
.item {
color: green;
border: 5px solid green;
font-size: 1.3em;
padding: 0.5em;
width: 120px;
}
}
@layer special {
.item {
color: rebeccapurple;
}
}
第二種方法是:創(chuàng)建一個命名的級聯(lián)層而不分配任何樣式。這可以是單層,如下所示:
@layer green;
可以一次定義多個層,如下:
@layer green, special
一次定義多個層有什么好處呢?
因為聲明層的初始順序決定了層的優(yōu)先級。與聲明一樣,如果在多個層中找到聲明,最后定義的層聲明將最終生效。看下面代碼:
@layer green,special;
@layer green {
#app .item {
color: green;
border: 5px solid green;
font-size: 1.3em;
padding: 0.5em;
width: 120px;
}
}
@layer special {
.item {
color: rebeccapurple;
}
}
效果如下圖:
special層中item樣式規(guī)則將被應用即使它的特異性低于 green層中的規(guī)則。這是因為一旦層順序定義完成,就會忽略選擇器特異性。
同樣也會忽略出現(xiàn)的順序:
我們聲明層名稱并設置它們的順序后,可以通過重新聲明名稱來將 CSS 規(guī)則添加到圖層。然后將樣式附加到層,并且層順序不會更改。比如如下代碼雖然@layer green重新聲明了并在文件后方但是由于順序一開始已經設置所以字體顏色還是紫色:
@layer green,special;
@layer special {
.item {
color: rebeccapurple;
}
}
@layer green {
.item {
color: green;
border: 5px solid green;
font-size: 1.3em;
padding: 0.5em;
width: 120px;
}
}
效果如下:
忽略選擇器特異性和代碼出現(xiàn)順序可以讓我們創(chuàng)建更簡單的 CSS 選擇器,并使代碼優(yōu)雅,因為不必確保選擇器具有足夠高的特異性來覆蓋其他css規(guī)則,只需要確保它出現(xiàn)在后面的層中。
第三種方法是:創(chuàng)建一個沒有名稱的級聯(lián)層。例如:
@layer {
.item {
color: black;
}
}
這將創(chuàng)建一個匿名級聯(lián)層,該層功能與命名層相同。但是使用匿名層有如下缺點:
平時我們盡量避免使用匿名層。但當我們是樣式庫的作者,并想將某些css代碼不被使用者修改可以借助匿名層做到這一點。
第四種方法是:使用@import。CSS 原生支持 @import 導入其他 CSS 文件。
@import url(index.css) layer(index);
同時,也支持匿名引入,例如:
@import url(index.css) layer;
我們在使用@import時候需要放在除@charset之外的樣式規(guī)則前,否則無法導入。
可能的第五種方式仍在討論中:通過元素上的屬性。請參閱[css-cascade] Provide an attribute for assigning ato a cascade layer #5853。
3.4 層的嵌套規(guī)則
圖層可以嵌套。例如:
@layer base {
p { max-width: 70ch; }
}
@layer framework {
@layer base {
p { margin-block: 0.75em; }
}
@layer theme {
p { color: #222; }
}
}
生成的層可以表示為一棵樹:
1.base
2.theme
或可以用扁平列表表示
要將樣式附加到嵌套層,您需要使用以下全名來引用它:
@layer framework {
@layer default {
p { margin-block: 0.75em; }
}
@layer theme {
p { color: #222; }
}
}
@layer framework.theme {
/* 這些樣式會被添加到framework層里面的theme層 */
blockquote { color: rebeccapurple; }
}
看效果:
3.5 層的排序規(guī)則
級聯(lián)層按照它們聲明的順序排序。第一層優(yōu)先級最低,最后一層優(yōu)先級最高。但是,未分層的樣式具有最高優(yōu)先級:
/* 未分層 */a { color: green; }
@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 { a { color: yellow; } }
優(yōu)先級順序如下:
看下圖示例:
層可以在一個地方被定義圖層(以建立圖層順序),然后在任何地方添加樣式
/* 定義在一個地方 */
@layer my-layer;
/* 其他樣式*/
...
/* 在某個地方添加樣式 */
@layer my-layer { a { color: red; } }
3.6 加上!important之后的排序規(guī)則
/* 未分層 */ a { color: green !important; }
@layer layer-1 { a { color: red !important; } }
@layer layer-2 { a { color: orange !important; } }
@layer layer-3 { a { color: yellow !important; } }
任何加上重要聲明的樣式都以相反的順序應用
優(yōu)先級順序如下:
看下圖示例:
這里我們看到對應規(guī)則在chrome瀏覽器的顯示是正確的。但是在開發(fā)者控制臺中的樣式一欄規(guī)則顯示有問題。應該是chrome瀏覽器開發(fā)者控制臺的bug。
3.7 嵌套層的排序規(guī)則
@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 {
@layer sub-layer-1 { a { color: yellow; } }
@layer sub-layer-2 { a { color: green; } }
/* 未嵌套 */ a { color: blue; }
}
/* 未分層 樣式 */ a { color: black; }
優(yōu)先級順序如下:
3.8 媒體查詢對層排序的影響
以下層順序將取決于匹配的媒體條件:
例如:
@media (min-width: 600px) {
@layer layout {
.item {
font-size: x-large;
}
}
}
@media (prefers-color-scheme: dark) {
@layer theme {
.item {
color: red;
}
}
}
如果兩個媒體查詢的規(guī)則中匹配一個那么對應的級聯(lián)層生效。如果兩者都匹配,那么圖層順序將為layout, theme都生效。如果兩個都不匹配則不定義層。下圖是兩者都匹配的場景。
四、現(xiàn)在就能使用級聯(lián)層嗎?
4.1 目前瀏覽器支持程度
圖片來源:developer.mozilla.org
目前所有現(xiàn)代瀏覽器均已經支持 @layer 規(guī)則。所有瀏覽器廠商都支持的特性未來一定比較實用。
4.2 W3C 鼓勵可以作為日常使用
SS 的標準化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C層疊樣式列表小組以及獨立CSS專家組成。W3C 本身并不制定標準,而是作為一個論壇式的平臺,接收來自小組成員的提交,并通過會議來商討制定標準,所有的提交以及討論都是公開透明的,可以在 W3C 網站上看到會議的記錄,可以簡單分為4個大階段:
下圖可以幫助理解:
圖片來源:w3.org
W3C 通過狀態(tài)碼表示規(guī)范的成熟度。成熟度從低到高排序如下圖。
圖片來源:w3.org
再看下圖:包含layer概念的標準討論已經到達CR階段。
圖片來源:w3.org
W3C 鼓勵從 CR階段的標準 開始可以作為日常使用。
五、總結
最后,我們回到通過級聯(lián)層如何解決“引入了一個第三方組件庫導致樣式覆蓋“的問題上。
css代碼如下:
/* 排序層 */
@layer reset, lib;
/* 通用樣式 */
@layer reset {
#app .item {
color: black;
width: 100px;
padding: 1em;
}
}
/* 第三方庫樣式 */
/*我們將第三方庫的樣式全部放到lib層,這里一般使用@import導入的方式,為了示例簡單我們簡化了操作*/
@layer lib {
#app .item {
color: green;
border: 5px solid green;
font-size: 1.3em;
width: 130px;
}
}
/* 開發(fā)者樣式 */
.item {
color: red;
}
我們將第三方庫的樣式全部放到lib層,將需要重置的一些樣式放到reset層,自己開發(fā)的樣式不放入層中(當然你也可以放入到一層然后排序在最后)。由此我們實現(xiàn)了樣式的分層解決了第三方組件庫導致樣式覆蓋的問題,而且做到開發(fā)者樣式簡單不冗長。
效果如下:
級聯(lián)層(CSS@layer)已經歷概念提出到到瀏覽器全面支持的階段。也許在不久的將來大家都會普遍使用它,期望本文能給大家?guī)硪欢◣椭?/span>
參考資料:
作者:Zhang Jiqi
來源:微信公眾號:vivo互聯(lián)網技術
出處:https://mp.weixin.qq.com/s/4M-RvnTq8rJuKDC3VZOONQ
建網百科全書
通過我們推薦的參考學習書籍你將會學到的職場競爭能力:
通過這些參考學習書籍的學習,我們將會會學習10種語言和工具,包括HTML, HTML5, CSS, CSS3, JavaScript, jQuery, jQueryUI, Bootstrap, Wordpress, PHP, MySQL, etc。 我們可以從零基礎開始,建立多個網站實例,其中包括eBay,YouTube,AirPods,Tesla等網頁。 我們將歷經一場非常有趣,又具有挑戰(zhàn)性的旅程,讓我們一起從零到專業(yè)學習建立屬于自己的網站。
下面列出的參考學習書籍可以幫助任何沒有程序開發(fā)經驗的人更輕松地學習與IT相關的語言和工具。
這些學習書籍中有許多實際的例子以及一些比較完整的操作示例,幫助學生在短時間內全面地理解整個學科的知識,同時讓新知識應用到實際的操作和工作中。
《學習編碼:學習HTML,CSS和JavaScript,并構建網站,應用程序和游戲》
學習編碼 - 使用 HTML、CSS 和 JavaScript 構建網站、應用和游戲。
你準備好開始你的程序員之旅了嗎?坐下來,把自己綁起來,為美妙的學習體驗做好準備。本書將帶您完成易于遵循的分步課程,并為您提供編寫第一個程序所需的所有指導,制作一個有用的網站,讓您快速訪問所有您喜歡的在線地方,制作一個測驗應用程序,巧妙地適合您的手機,最后制作一個成熟的基于體系的平臺游戲。一流!
本書旨在讓您能夠編寫所有內容以在瀏覽器中運行,并在PC或Mac上本地編程。事實上,根據(jù)設計,HTML,CSS和JavaScript可以在任何瀏覽器中運行,并在幾乎任何文本編輯器中編碼。
那你還等什么?
你需要什么?
您需要的一切都可以在Windows和Mac上免費獲得。 更好的是,您需要的是內置的。
書中的每個練習都為您準備下一個練習,隨著您的進步教您新技能。你不需要以前的經驗,因為一切都被分解和徹底解釋。此外,您可以從支持網站下載所需的所有代碼、圖像、背景圖像、精靈、音效、音樂和任何其他元素。您需要的所有細節(jié)在每次練習中都貫穿全書。
最重要的是,如果你想學習編碼,這本書將為您提供很棒的工具,讓你快速編碼!
《學習足夠的 HTML、CSS 和布局來變得專業(yè):現(xiàn)代網站創(chuàng)建和模板系統(tǒng)簡介》
這本書有您所需要知道的一切,沒有您不知道的,開始創(chuàng)建和部署網站;
要設計、構建和部署現(xiàn)代網站,您需要三項核心技能:編寫和編輯 HTML 的能力,使用 CSS 控制頁面設計的能力,以及創(chuàng)建為用戶提供良好服務的高效 Web 布局。但是你不需要學習關于HTML,CSS和網頁布局的“一切”,只需要如何有效地使用它們來解決實際問題。在《學習足夠的HTML、CSS和布局到專業(yè)》一書中,專家開發(fā)人員Lee Donahoe和著名講師Michael Hartl教授完成工作所需的特定概念、技能和方法。
即使您從未創(chuàng)建過網頁,作者也會幫助您快速建立技術復雜性并掌握成功所需的知識。專注的練習可以幫助您內化重要的事情,而不會將時間浪費在專業(yè)人士不關心的細節(jié)上。很快,你就會像生來就知道這些東西一樣——你會突然變得非常專業(yè)。
通過本書學習了解足夠多的信息。 。 。
Michael Hartl的“Learn Enough”系列包括書籍和視頻課程,這些課程側重于每個主題中最重要的部分,因此您不必學習所有內容即可開始 - 您只需要學習足夠的知識即可成為專業(yè)并自己解決技術問題。
《使用 HTML5 和 CSS 進行響應式網頁設計:使用最新的 HTML5 和 CSS 技術構建面向未來的響應式網站,第 4 版》
利用 HTML5 和 CSS 的最新功能,創(chuàng)建可在手機、平板電腦和臺式機上完美運行的單一 UI,以及介于兩者之間的所有內容 - 現(xiàn)在具有彩色圖像!
本書的主要特點
本書的內容簡介
《Responsive Web Design with HTML5 and CSS, Fourth Edition》是關于響應式網頁設計的最新HTML5和CSS技術的最全面和最暢銷的書籍之一的完全改進和擴展版本。它強調實用的應用,教你構建大多數(shù)現(xiàn)實生活網站所需的方法,每章都有可下載應用的示例。
本版本書籍以作者友好且易于遵循的風格編寫,涵蓋了響應式網頁設計的所有最新發(fā)展和改進,包括更好的可訪問性、可變字體和字體加載的方法,以及最新的顏色處理工具進入瀏覽器。您可以享受前沿功能的覆蓋范圍,例如 CSS 層、容器查詢、嵌套和子網格。
本書最后探討了作者對前端開發(fā)的一些獨家技巧和方法。
在本書結束時,您不僅會全面了解響應式網頁設計以及最新的HTML5和CSS的可能性,而且還會了解如何最好地實現(xiàn)每種技術。作為完整指南通讀,或作為每個主題重點章節(jié)的參考。
你將學到什么
這本書是為誰寫的
您是需要提高前端技能的全棧或后端開發(fā)人員嗎?也許您在前端工作,并且需要對所有現(xiàn)代HTML和CSS提供的明確概述?也許你已經做了一些網站建設,但你需要深入了解響應式網頁設計以及如何實現(xiàn)它們?那么這就是給你的書!要利用本書,你需要的只是對HTML和CSS的工作理解。不需要JavaScript知識。
本書的目錄
《響應式網頁設計與HTML 5和CSS》
Minnick的《RESPONSIVE WEB DESIGN WITH HTML 5和CSS,第9版》為您提供最新的工具,逐步教您如何設計專業(yè)質量的網站來吸引和留住客戶。這本書籍包含專業(yè)人士的最佳實踐和提示,為您提供了 HTML、CSS 和響應式網頁設計的堅實基礎。它向您展示如何創(chuàng)建一個自動適應手機、平板電腦、筆記本電腦和臺式機設備以及大型顯示器的網站。您將學習如何編寫網頁代碼以從移動設備撥打電話、嵌入地圖、使用自定義字體、創(chuàng)建快捷導航菜單、集成社交媒體以促進業(yè)務等。此外,您將使用流行的Web框架Bootstrap來創(chuàng)建網頁。
《學習網頁設計 - HTML5:實用手冊》
這本電子書是通過練習HTML來學習網頁設計的實用指南。
當您完成這本電子書的學習時,您將掌握HTML和網頁設計技術!
這是自學材料!
任何有興趣學習HTML和網頁設計的人都可以閱讀這本電子書。
快樂學習、快樂編碼!
《使用HTML5和CSS3進行網站設計和開發(fā)》
結合理論和實踐,《HTML5和CSS3的網站設計和開發(fā)》既針對想要設計第一個網站的初學者,也針對想要鞏固其技術技能的經驗豐富的開發(fā)人員。
本書討論了HTML5和CSS3的理論方面,包括:HTML元素,語義容器,語義文本格式,多媒體元素,表單,表格,CSS樣式的定義和集成,文本格式以及容器和框樣式。本書還包括一個實用部分,介紹了創(chuàng)建網站的過程,以及應用的關鍵規(guī)則,以便不僅實現(xiàn)項目成功,而且滿足用戶需求。
本書通過大量示例說明,包括更正的實際工作,根據(jù)從簡單的HTML5頁面設計到創(chuàng)建專業(yè)網站的進化邏輯進行結構化。
《jQuery食譜:找到所有jQuery問題的現(xiàn)成解決方案》
快速發(fā)現(xiàn)常見問題的解決方案、您可以遵循的最佳實踐以及 jQuery 提供的所有功能。本書使用問題解決方案,從開發(fā)人員在使用jQuery時通常面臨的小的初始問題開始,然后逐漸深入探索更復雜的問題。解決方案包括插圖和清晰、簡潔的代碼說明。
您將學習有效地遍歷和操作 DOM,了解如何使用數(shù)組、迭代、事件模型以及實現(xiàn)動畫和視覺效果。您將探索如何使用插件和 CSS。使用本書和jQuery,您的網站將更加動態(tài)和生動。這個完全更新的第二版教你現(xiàn)代jQuery技術,包括如何遍歷和操作DOM,理解事件模型,實現(xiàn)動畫和使用滑動效果。
《jQuery Recipes,第二版》向您展示了如何避免浪費開發(fā)時間并解決您可能面臨的問題。這是一個寶貴的參考學習書籍,可以在你進行jQuery開發(fā)時留在你身邊。立即開始使用《 jQuery Rerecies 》這本書,使你成為 jQuery 專業(yè)人士。
通過本書你將學到什么
本書適合誰學習:
這本書非常適合希望學習 jQuery 并在開發(fā)過程中擁有方便的 jQuery 參考的新手或中級開發(fā)人員。
《學習PHP,MySQL和JavaScript:使用jQuery,CSS和HTML5》
使用開源技術和 Web 標準的強大組合構建交互式數(shù)據(jù)驅動型網站,即使您只有基本的 HTML 知識。通過這個流行的實踐指南,您將在當今的核心技術的幫助下處理動態(tài)Web編程:PHP,MySQL,JavaScript,CSS,HTML5和現(xiàn)成函數(shù)的jQuery庫,以顯著增強您的項目。
您不僅可以快速了解這些各種技術的最新更新,包括增強的MySQL和PHP安全功能,還可以學習如何優(yōu)化您的網站以在手機和平板電腦上使用。
分別探索每種技術,學習如何將它們一起使用,并在此過程中學習有價值的 Web 編程實踐。在本書的最后,您將把所有內容放在一起,使用AMPPS或任何其他流行的開發(fā)堆棧來構建一個適用于桌面和移動瀏覽器的全功能社交網站。您將深入學習PHP,以及面向對象編程的基礎知識。
《Bootstrap 5 指南:使用 Sass 和 JavaScript 自定義和擴展 Bootstrap 5,以創(chuàng)建獨特的網站設計》
通過釋放 Bootstrap 5 的全部潛力并創(chuàng)建高效的 UI, 使您的網站脫穎而出
Bootstrap 是世界上最受歡迎和易于使用的前端 UI 工具包之一,用于構建響應式網站,但很少有人知道如何充分利用其廣泛的組件、實用程序、JavaScript 插件和其他功能。《Missing Bootstrap 5 Guide》 將幫助您使用 Sass 自定義 Bootstrap 5,以實現(xiàn)從人群中脫穎而出的布局,使您能夠創(chuàng)建看起來不像是用 Bootstrap 創(chuàng)建的獨特內容。
有了這個實用的 Bootstrap 定制指南,使用 Bootstrap 的開發(fā)人員將能夠利用強大的定制技術來創(chuàng)建具有獨特設計和獨家功能的網站。您將看到如何通過使用CSS,Sass和JavaScript的高級功能來自定義您的網站,從而快速輕松地開發(fā)具有視覺吸引力的網站。從學習如何使用 Sass 創(chuàng)建 Bootstrap 5 視覺樣式開始,您將了解如何自定義它以滿足您的需求,同時實現(xiàn)您想要的網站外觀。然后,您將使用這些知識使用Bootstrap 5的大部分組件以及Sass和JavaScript的自定義來創(chuàng)建網站。最后,您將探索與 Sass、CSS、JavaScript 和源代碼優(yōu)化相關的各種高級 Bootstrap 5 主題。
在本書結束時,您將能夠使用 Bootstrap 5 的強大功能自行設計和構建現(xiàn)代、迷人且獨特的網站。
通過本書你將學到什么:
這本書是為誰寫的:
本書面向熟悉HTML并具有Bootstrap經驗的UI設計人員和開發(fā)人員。前端和使用Bootstrap的后端開發(fā)人員,他們不知道如何編寫CSS代碼,但對HTML有扎實的掌握,也會發(fā)現(xiàn)這本書很有用。有經驗的默認引導程序文件用戶可以使用本書來了解有關自定義和其他高級功能的所有信息。
本書的目錄:
小新 編譯自 Insight Data Blog
量子位 出品 | 公眾號 QbitAI
寫個網頁能有多麻煩?在大多數(shù)公司里,這項工作分為三步:
1. 產品經理完成用戶調研任務后,列出一系列技術要求;
2. 設計師根據(jù)這些要求來設計低保真原型,逐漸修改得到高保真原型和UI設計圖;
3. 工程師將這些設計圖實現(xiàn)為代碼,最終變成用戶使用的產品。
這么多環(huán)節(jié),任何地方出一點問題,都會拉長開發(fā)周期。因此,不少公司,比如Airbnb已經開始用機器學習來提高這個過程的效率。
△ Airbnb內部的AI工具,從圖紙到代碼一步到位
看起來很美好,但Airbnb還沒公開該模型中端到端訓練的細節(jié),以及手工設計的圖像特征對該模型的貢獻度。這是該公司特有的閉源解決方案專利,可能不會進行公開。
好在,一個叫Ashwin Kumar的程序員創(chuàng)建了一個開源版本,讓開發(fā)者/設計師的工作變得更簡單。
以下內容翻譯自他的博客:
理想上,這個模型可以根據(jù)網站設計的簡單手繪原型,很快地生成一個可用的HTML網站:
△ SketchCode模型利用手繪線框圖來生成HTML網站
事實上,上面例子就是利用訓練好的模型在測試集上生成的一個實際網站,代碼請訪問:https://github.com/ashnkumar/sketch-code。
目前要解決的問題屬于一種更廣泛的任務,叫做程序綜合(program synthesis),即自動生成工作源代碼。盡管很多程序綜合研究通過自然語言規(guī)范或執(zhí)行追蹤法來生成代碼,但在當前任務中,我會充分利用源圖像,即給出的手繪線框圖來展開工作。
在機器學習中有一個十分熱門的研究領域,稱為圖像標注(image caption),目的是構建一種把圖像和文本連接在一起的模型,特別是用于生成源圖像內容的描述。
△ 圖像標注模型生成源圖像的文本描述
我從一篇pix2code論文和另一個應用這種方法的相關項目中獲得靈感,決定把我的任務按照圖像標注方式來實現(xiàn),把繪制的網站線框圖作為輸入圖像,并將其相應的HTML代碼作為其輸出內容。
注:上段提到的兩個參考項目分別是
pix2code論文:https://arxiv.org/abs/1705.07962
floydhub教程:https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org
確定圖像標注方法后,理想中使用的訓練數(shù)據(jù)集會包含成千上萬對手繪線框圖和對應的HTML輸出代碼。但是,目前還沒有我想要的相關數(shù)據(jù)集,我只好為這個任務來創(chuàng)建數(shù)據(jù)集。
最開始,我嘗試了pix2code論文給出的開源數(shù)據(jù)集,該數(shù)據(jù)集由1750張綜合生成網站的截圖及其相應源代碼組成。
△ pix2code數(shù)據(jù)集中的生成網站圖片和源代碼
這是一個很好的數(shù)據(jù)集,有幾個有趣的地方:
該數(shù)據(jù)集中的每個生成網站都包含幾個簡單的輔助程序元素,如按鈕、文本框和DIV對象。盡管這意味著這個模型受限于將這些少數(shù)元素作為它的輸出內容,但是這些元素可通過選擇生成網絡來修改和擴展。這種方法應該很容易地推廣到更大的元素詞匯表。
每個樣本的源代碼都是由領域專用語言(DSL)的令牌組成,這是該論文作者為該任務所創(chuàng)建的。每個令牌對應于HTML和CSS的一個片段,且加入編譯器把DSL轉換為運行的HTML代碼。
為了修改我的任務數(shù)據(jù)集,我要讓網站圖像看起來像手工繪制出的。我嘗試使用Python中的OpenCV庫和PIL庫等工具對每張圖像進行修改,包括灰度轉換和輪廓檢測。
最終,我決定直接修改原始網站的CSS樣式表,通過執(zhí)行以下操作:
1. 更改頁面上元素的邊框半徑來平滑按鈕和DIV對象的邊緣;
2. 模仿繪制的草圖來調整邊框的粗細,并添加陰影;
3. 將原有字體更改為類似手寫的字體;
最終實現(xiàn)的流程中還增加了一個步驟,通過添加傾斜、移動和旋轉來實現(xiàn)圖像增強,來模擬實際繪制草圖中的變化。
現(xiàn)在,我已經處理好數(shù)據(jù)集,接下來是構建模型。
我利用了圖像標注中使用的模型架構,該架構由三個主要部分組成:
1. 一種使用卷積神經網絡(CNN)的計算機視覺模型,從源圖像提取圖像特征;
2. 一種包含門控單元GRU的語言模型,對源代碼令牌序列進行編碼;
3. 一個解碼器模型,也屬于GRU單元,把前兩個步驟的輸出作為輸入,并預測序列中的下一個令牌。
△ 以令牌序列為輸入來訓練模型
為了訓練模型,我將源代碼拆分為令牌序列。模型的輸入為單個部分序列及它的源圖像,其標簽是文本中的下一個令牌。該模型使用交叉熵函數(shù)作為損失函數(shù),將模型的下個預測令牌與實際的下個令牌進行比較。
在模型從頭開始生成代碼的過程中,該推理方式稍有不同。圖像仍然通過CNN網絡進行處理,但文本處理開始時僅采用一個啟動序列。在每個步驟中,模型對序列中輸出的下個預測令牌將會添加到當前輸入序列,并作為新的輸入序列送到模型中;重復此操作直到模型的預測令牌為,或該過程達到每個文本中令牌數(shù)目的預定義值。
當模型生成一組預測令牌后,編譯器就會將DSL令牌轉換為HTML代碼,這些HTML代碼可以在任何瀏覽器中運行。
我決定使用BLEU分數(shù)來評估模型。這是機器翻譯任務中常用的一種度量標準,通過在給定相同輸入的情況下,衡量機器生成的文本與人類可能產生內容的近似程度。
實際上,BLEU通過比較生成文本和參考文本的N元序列,以創(chuàng)建修改后的準確版本。它非常適用于這個項目,因為它會影響生成HTML代碼中的實際元素,以及它們之間的相互關系。
最棒的是,我還可以通過檢查生成的網站來比較當前的實際BLEU分數(shù)。
△ 觀察BLEU分數(shù)
當BLEU分數(shù)為1.0時,則說明給定源圖像后該模型能在正確位置設置合適的元素,而較低的BLEU分數(shù)這說明模型預測了錯誤元素或是把它們放在相對不合適的位置。我們最終模型在評估數(shù)據(jù)集上的BLEU分數(shù)為0.76。
后來,我還想到,由于該模型只生成當前頁面的框架,即文本的令牌,因此我可以在編譯過程中添加一個定制的CSS層,并立刻得到不同風格的生成網站。
△ 一個手繪圖生成多種風格的網頁
把風格定制和模型生成兩個過程分開,在使用模型時帶來了很多好處:
1.如果想要將SketchCode模型應用到自己公司的產品中,前端工程師可以直接使用該模型,只需更改一個CSS文件來匹配該公司的網頁設計風格;
2. 該模型內置的可擴展性,即通過單一源圖像,模型可以迅速編譯出多種不同的預定義風格,因此用戶可以設想出多種可能的網站風格,并在瀏覽器中瀏覽這些生成網頁。
受到圖像標注研究的啟發(fā),SketchCode模型能夠在幾秒鐘內將手繪網站線框圖轉換為可用的HTML網站。
但是,該模型還存在一些問題,這也是我接下來可能的工作方向:
1. 由于這個模型只使用了16個元素進行訓練,所以它不能預測這些數(shù)據(jù)以外的令牌。下一步方向可能是使用更多元素來生成更多的網站樣本,包括網站圖片,下拉菜單和窗體,可參考啟動程序組件(https://getbootstrap.com/docs/4.0/components/buttons/)來獲得思路;
2. 在實際網站構建中,存在很多變化。創(chuàng)建一個能更好反映這種變化的訓練集,是提高生成效果的一種好方法,可以通過獲取更多網站的HTML/CSS代碼以及內容截圖來提高;
3. 手繪圖紙也存在很多CSS修改技巧無法捕捉到的變化。解決這個問題的一種好方法是使用生成對抗網絡GAN來創(chuàng)建更逼真的繪制網站圖像。
代碼:https://github.com/ashnkumar/sketch-code
原文:https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82
— 完 —
誠摯招聘
量子位正在招募編輯/記者,工作地點在北京中關村。期待有才氣、有熱情的同學加入我們!相關細節(jié),請在量子位公眾號(QbitAI)對話界面,回復“招聘”兩個字。
量子位 QbitAI · 頭條號簽約作者
?'?' ? 追蹤AI技術和產品新動態(tài)
*請認真填寫需求信息,我們會在24小時內與您取得聯(lián)系。