WHY CSS:回到切版出生的地方


前言

每每提到切版的時候,都會有一種切版像是在鑽 CSS 的漏洞,各種 CSS tricks 跟 hack 讓人防不勝防,也讓不少前端工程師產生 CSS 可能是最簡單也最困難、像是蛋炒飯一樣的語言。

當然更多時候,工作環境中的 CSS 都已經打包好了,例如:透過 Sass, Scss 打包成一個個 mixin,或直接使用 Styled Component 來管理與測試,但也有很多時候,一個剛入門前端工程師的初心者、在工程管理還尚未成熟的公司,會被交付大量的切版任務,這讓入門的人非常茫然。

所以有了這系列文章 WHY CSS,希望回到過去,作為一個入門新手,有沒有機會不要 Case by Case 的學習,而是從設計到 CSS 為什麼這樣被設計來學習?並了解技術選擇在切版流程的緣由來學習切版這件事呢?希望嘗試重新整理切版這件事、並研究為什麼 CSS 要長這樣。

什麼是切版?

設想你今天是一個只知道網站分成前後端的初心者,上網查了前端工程師發現在前端的世界裡有個專有名詞叫做「切版」,你發現有些職缺要求寫著要會切版、有些甚至切版工程師與前端工程師職稱就是分開的,這讓你非常疑惑。

於是你又搜尋「切版」,看到切版要會 HTML、CSS 跟 JS、切版是把視覺稿變成網頁的工作、但又跟前端開發不完全等號的說法,變得更加徬徨,前端工程師不就是在把畫面開發出來的工作嗎?

為什麼切版會被區隔出來,對於還沒開始前端工程師工作的人很難想像,因為這件事得要先從前端工程師的工作流程來說起。

一般來說,公司在制定了功能之後,會由 PM 整理出 User Story 讓大家知道使用者可以進行什麼操作、並由設計師出畫面的視覺稿給前端工程師,由前端工程師來開發出一樣畫面符合 User Story 操作過程的介面。

在讓畫面動態一樣、且符合不同裝置(RWD)這件事情上,就是所謂的「切版」,這件事情是可以跟後續 User Story 想要互動操作開發與資料串接分開的,流程上可以將視覺先切版完成後再交付給別人來串接資料。所以才會有一些公司是由設計師切版、有時有專職切版工程師、有時由前端工程師包辦的狀況,端看公司的分工跟需求。

所以單獨來看切版,本身需要學習的重點是做出符合設計稿的網頁視覺,並落實視覺呈現在不同裝置顯示上的顯示外,還要能跟後續開發者,銜接好串接跟程式碼維護,是一個設計踏入工程的第一線工作。

切版與 HTML & CSS 的關係

現在大致了解切版在做什麼了,那切版需要的工具是什麼,這就要看電腦是怎麼了解視覺稿了。

對人類來說,可以純粹的把網站當成一片平面,有圖、有字、有形狀並放置在一個平面上的 A 點 B 點。但對電腦來說無法,電腦需要人類先定義好這些東西、定義好他的顯示規則,才能根據這些規則跑出相應的位置。

那誰怎麼決定我們要寫給電腦的指令長什麼樣子?

那是個網際網路才剛誕生的時代,還沒有人想到網路會這樣爆炸性的成長、只是想要在網際網路來傳輸文件的時代。HTML 作為適合在網路上傳輸的文件格式誕生了,在那時大家對 HTML 的期待只有:一本書該有的 HTML 應該要有,所以有了標題、表格、連結等等的功能。

但隨著網路指數性成長,只是一本書的基本功能早就不能因應這個新的媒體「網站」,大家希望網站不只是像一本書,可以有更多設計跟華麗的造型,於是各式樣式語法頓時百家爭鳴,但最後 CSS 脫穎而出,並由 W3C 這個組織來制定標準,建議要有什麼語法來告訴瀏覽器、可以有什麼樣式,再由各家瀏覽器決定要不要支援跟怎麼實作。

稍微穿越一下,逐一去檢視樣式的設計初衷,了解了 W3C 怎麼去提供 CSS 標準,這才發現雖然很常用 W3C School 這個網站來查看 CSS 的教學,但鮮少去看過 W3C 的本家網站,從 CSS 的目錄到 CSS1 至 CSS3 的目錄可以很清楚 CSS 的脈絡。

  • CSS1:定義了基本對 HTML 能做的更動、讓 HTML 像是一本書,例如:定義選取元素的 Selector 跟排版基本所需的 display 與 float 及文字背景框線等基本樣式。

  • CSS2:開始擴充上述的基本功能外,開始把網站「當成網站」,例如:可以調整游標、處理頁面 Overflow、出現 @media query 針對 print 跟 screen 不同狀態寫 CSS,代表著從書本轉化到現代網站的過渡期。

  • CSS3:(嚴格來說是 CSS2.1 + 各種 module) 開始走向現代網頁所需的各種樣式,並且跟著設計趨勢與時俱進的提出新的建議。

這才發現平常使用的 CSS 有許多是為了過去的排版設計存在的屬性,最具代表性的例子是 Float,這是一個從 CSS1 就存在的屬性,當初是為了做出書本排版中時常出現的文繞圖效果而存在的屬性,但在這個跨裝置的時代,這並不是一個好的設計,所以便不敷使用了。

回到正題,HTML 跟 CSS 其實是由一個組織根據現代需求,定義好一系列的規則後,建議給各家瀏覽器說:「你們可不可以讓瀏覽器看得懂這個新單字、語法?」並由各家瀏覽器採納、實現看懂這些語法的功能。

瀏覽器透過 HTML 了解有什麼內容存在,而 HTML 是又是透過 tag 標記內容來讓瀏覽器了解。像是:「 嘿!瀏覽器這邊有個叫做『標題』的文字,他被標記叫做 h1,之後可以把他當作 h1 對待。」

<h1>標題</h1>
<p>一串文字</p>

另外一方面瀏覽器透過 CSS 設定這些內容怎麼呈現,而 CSS 又是透過選擇元素的方式來跟瀏覽器敘述元素要長什麼樣子,像是:「 嘿!瀏覽器這邊希望 h1 啊,可以字體都 32px 對待。」

h1 {
    font-size: 32px;
}

切版發展的難點

既然 HTML 跟 CSS 是瀏覽器了解畫面視覺的工具,自然而然切版工程師要最熟悉的也是這兩個工具(除了有時 CSS 並無法呈現出所有效果的時候,就得使用一些 javascript 來處理)但事情聽起來也不是很複雜,只要跟電腦溝通有什麼、放哪就好,除了有些的確擺放方式比較特別、還要動起來外,切版的難處在哪裡?

  1. 預想與現實的落差:從剛剛的故事我們也可以發現,CSS 有很大一塊是從對現實狀況的觀察,加上多間瀏覽器落實的時間差,這就意味著「有一些現實的設計需求是超出 CSS 當初提出標準的預想」以此為分水嶺,超出的我們就得用屬性去湊。

  2. 設計與工程的斷層:由於切版是將設計銜接工程的第一步,所以除了還原設計之外,在設計沒有呈現到的,例如:畫面之間的縮放,或背後工程銜接管理上,像是:將字體圖片等用開發上選擇合乎公司技術管理的方式處理。

  3. 疊層樣式:由於 CSS 是用來「敘述」的語言,所以敘述之間可以疊加,例如:「A 元素可以放在左上角」另外一行又提到「A 元素可以距離右邊遠一點」這兩個描述會互相影響。

常常得湊出來的各種描述又介於兩個領域之間讓 CSS 變成最簡單又最困難的語言,如果只是要像截圖一樣呈現一個畫面,以大部分的網頁設計來說並不困難,但是要在上述的情境下,顧及銜接、不同裝置各種面相的事情,就不好管理了。

結語

本系列文章希望透過瞭解 CSS 當初設計的預想來介紹切版,讓大家瞭解到 RWD 跟素材上可以有哪些方式來處理跟選擇原因,最後聊聊 CSS 怎麼管理跟優化來走過切版工程師會注意到的議題。

文章中不會細部介紹每一個屬性,因為屬性介紹已經有很多教學、甚至 W3C 自己的 W3C School 就提供很多親民的介紹,也不會介紹 A 版怎麼切、B 版怎麼切,這可以透過很多實作影片來學習,像是知名的 Amos 系列

但會希望未來切版的時候,會回想起為什麼選擇這樣的實現方式、並研究怎麼做一個好的介於設計與工程之間的橋樑:)

#css #html #切版
WHY CSS
本系列文章希望可以讓入門新手,有沒有機會不要 Case by Case 的學習 CSS,而是從設計到 CSS 為什麼這樣被設計來學習切版?並了解技術選擇在切版流程的緣由來學習切版這件事。






Related Posts

Day06 LINE Login API

Day06 LINE Login API

Docker 入門實戰教學:如何使用 Docker Compose 建置 Python Flask + Redis 記數器

Docker 入門實戰教學:如何使用 Docker Compose 建置 Python Flask + Redis 記數器

Day06_Origami學習筆記

Day06_Origami學習筆記

每日心得筆記 2020-06-26(五)

每日心得筆記 2020-06-26(五)

Day01 : 數字、字串、變數

Day01 : 數字、字串、變數

透過製作 Babel-plugin 初訪 AST

透過製作 Babel-plugin 初訪 AST



Comments