您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁(yè)設(shè)計(jì)之CSS基線之道

 

本文譯自:CSS Baseline: The Good, The Bad And The Ugly
譯文原文:CSS基線之道
譯者:寂寞小刀
請(qǐng)尊重版權(quán),轉(zhuǎn)載請(qǐng)注明來(lái)源,如果你有比較好的原創(chuàng)或翻譯文章,也歡迎投稿到前端觀察,多謝~~

譯者注:網(wǎng)頁(yè)設(shè)計(jì)布局中一直比較流行網(wǎng)格對(duì)齊,但只是針對(duì)水平的對(duì)齊,很少或者沒(méi)有涉及垂直對(duì)齊,這篇文章很詳細(xì)的講解了垂直網(wǎng)格,乃至基線對(duì)其的相關(guān),而css3中的多列布局的也使其顯得更為重要,因此還是很有必要去了解學(xué)習(xí),至少也是一種思路。

——————————譯文——————————-

這或許是因?yàn)槿鄙倩€網(wǎng)格的理解和欣賞,更或者是因?yàn)榛€網(wǎng)格是出了名的難以實(shí)現(xiàn), 迄今為止還沒(méi)有人拿著藍(lán)圖讓它成功實(shí)現(xiàn)。 有些人甚至認(rèn)為基線在網(wǎng)絡(luò)上是多余的,基線作為一種排版術(shù)語(yǔ)和網(wǎng)絡(luò)上的行為,在網(wǎng)絡(luò)上遵循的規(guī)則有別于用于印刷的,line-height和真正的行距之間令人沮喪的差異就是最明顯的例子。 目前,無(wú)論怎樣,讓我們先假設(shè)基線至少在某種程度上對(duì)于來(lái)說(shuō)網(wǎng)頁(yè)設(shè)計(jì)師是一種有用的工具。但是它到底是什么樣的一種工具,在我們手上有什么可以自由使用的工具來(lái)實(shí)現(xiàn)它,并且最重要的是,這到底值不值得。

baseline

垂直網(wǎng)格和模式識(shí)別

在數(shù)學(xué)計(jì)算和為實(shí)現(xiàn)基線對(duì)齊而進(jìn)行將在的輕移之前,不妨來(lái)了解其根本的本質(zhì):垂直網(wǎng)格。在了解為什么的同時(shí),也就有了很好的準(zhǔn)備和更大的動(dòng)力來(lái)著手解決怎樣去實(shí)現(xiàn)基線對(duì)齊,這個(gè)有時(shí)讓人沉悶而又著迷的問(wèn)題。 垂直網(wǎng)格,可以簡(jiǎn)單的理解為涉及到結(jié)構(gòu)高度和垂直排列元素之間的間距,或許更為普遍點(diǎn)來(lái)說(shuō)是內(nèi)邊距(padding),外邊距(margin)和行高(line-height)。正如水平網(wǎng)格通過(guò)一個(gè)預(yù)設(shè)的單元尺寸約束布局而達(dá)到整齊和諧的效果一樣,垂直網(wǎng)格也在用戶下滾的時(shí)候通過(guò)一致的,可預(yù)測(cè)的措施提供固定結(jié)構(gòu)的內(nèi)容。

Grids are not only helpful on the horizontal axis, but also on the vertical axis.

網(wǎng)格不僅在水平方向有用,在垂直方向同樣有用

為什么垂直網(wǎng)格重要?是因?yàn)?strong>垂直網(wǎng)格與我們大腦如何工作相關(guān),也與我們?nèi)绾瓮ㄟ^(guò)模式識(shí)別來(lái)解析周圍世界相關(guān)。即使不再深入這個(gè)話題(其他比我聰明的人更適合這個(gè)任務(wù)),也可以說(shuō)模式識(shí)別容許人類大腦在模式庫(kù)中儲(chǔ)存相似或者相同的印象(譬如基本的形狀和顏色),并在遇到新的刺激的情況下通過(guò)模式庫(kù)檢索來(lái)快速分析。這也是為什么我們的閱讀的時(shí)候不去注意當(dāng)個(gè)獨(dú)立的字母,反而在一瞬間即可認(rèn)出整個(gè)單詞(從我們大腦記憶當(dāng)中拿出以前相同模式的實(shí)例),這同樣也是為什么我們能夠很快認(rèn)出當(dāng)個(gè)的字母(”A”  ”B” “C” …),即使字體、尺寸和顏色發(fā)生變化——其基本的形狀已經(jīng)存儲(chǔ)在我們大腦的模式庫(kù)。 一旦任何類型的刺激都不能匹配到你之前存儲(chǔ)的模式,這就會(huì)促使大腦在新的記憶中存入新的模式,這反過(guò)來(lái)需要更多的腦力消耗——而這就是結(jié)構(gòu)和網(wǎng)格(無(wú)論是水平還是垂直)設(shè)計(jì)的重要之處,接下來(lái),想象一個(gè)有一致段落間距為X的簡(jiǎn)單布局。在第一處分析過(guò)之后,作為同樣的模式,你的大腦會(huì)立即認(rèn)出其他所有的相同段落。但如果相反,同樣的布局中元素之間有著不同的間距,讀者的大腦要分析所有獨(dú)立的元素才能理解他們的意思。用另一句話來(lái)說(shuō):大腦需要分析的形狀越多,它所需時(shí)間便越長(zhǎng)。

Irregular shapes (left) require more processing power than regular shapes (right).

不規(guī)則的左邊比右邊需要更多的腦力消耗

任何不規(guī)則的形狀都會(huì)打斷先流水般涌出的模式識(shí)別(因此會(huì)浪費(fèi)一部分本應(yīng)該用于欣賞優(yōu)秀內(nèi)容的腦力活動(dòng)),而一種規(guī)則的,一致的并且可以預(yù)期的結(jié)構(gòu)將會(huì)使你的設(shè)計(jì)更易讀也能理解認(rèn)知你的設(shè)計(jì)。建立一種固定的基線網(wǎng)格便是實(shí)現(xiàn)它的一種很好的方法。

此外,通過(guò)基本一個(gè)每個(gè)垂直(和水平)間距都一致,每一個(gè)元素有著預(yù)設(shè)單元尺寸的系統(tǒng)不僅消除了上述隨意的不統(tǒng)一性,也使得設(shè)計(jì)師的工作更加容易,設(shè)計(jì)師只需在總框架總決定基本的結(jié)構(gòu)。建立一個(gè)標(biāo)準(zhǔn),比如,頭部下面總有兩個(gè)基線的白色間距,每個(gè)盒子都有三個(gè)基線空間的內(nèi)邊距,在我們的布局中增加邏輯,這不僅易于設(shè)計(jì),易于實(shí)現(xiàn),更重要的是易于理解。

現(xiàn)在,如果垂直網(wǎng)格還像一個(gè)抽象概念,基線的另一個(gè)優(yōu)點(diǎn)——多列水平對(duì)齊——就顯得更容易理解。這在印刷設(shè)計(jì)中更加常見(jiàn),特別是雜志和報(bào)紙,經(jīng)常使用多列布局,相鄰段落(或者頭部)若基線對(duì)齊的很好會(huì)令閱讀沉浸而歡快,一旦對(duì)齊的不好或者根本沒(méi)有對(duì)齊閱讀便被煩人的打斷。這種來(lái)源于基線對(duì)齊的安靜的排版展現(xiàn)了一種視覺(jué)自信,一個(gè)看不見(jiàn)支架支撐著頁(yè)內(nèi)所有的元素,讓讀者潛意識(shí)的安心下來(lái)。一本左手頁(yè)每一行都對(duì)齊相對(duì)右手頁(yè)的書(shū)讓人很容易感覺(jué)到信任,而相反若是根本對(duì)齊的書(shū)籍,這種信任則相對(duì)少的多。

Horizontal baseline alignment across multiple columns.
多列水平對(duì)齊

line-height的問(wèn)題

傳統(tǒng)意義上,基線是指大部分字母所“坐落”其上的一條看不見(jiàn)的線,每條基線之間形成基本的基線網(wǎng)格,正如之前所討論的,基線不但形成垂直網(wǎng)格,而且會(huì)使相鄰列之間水平對(duì)齊。一旦定義好了基線網(wǎng)格,接下來(lái)要做的便是強(qiáng)制所有的元素對(duì)齊,以此來(lái)使得成行的文本,邊框,圖片或者盒子元素總是匹配對(duì)齊到相同的垂直結(jié)構(gòu)。

問(wèn)題是,像在InDesign中能夠讓你點(diǎn)擊按鈕(準(zhǔn)確的開(kāi)啟和關(guān)閉網(wǎng)格)便能輕松調(diào)整形狀來(lái)對(duì)齊網(wǎng)格的工具,對(duì)應(yīng)到css中只能通過(guò)控制調(diào)整行高(line-height),內(nèi)邊距(padding),外邊距(margin),大?。╯ize)——其中任何的變動(dòng)都可能會(huì)引起元素總高度的變化。

The traditional baseline is the line upon which most letters sit and from which the total height of elements should derive.

傳統(tǒng)的基線是大部分字母所“坐落”其上線,并且基線之間的高度便是元素的總高度。

更糟糕的是,css中的line-height屬性并沒(méi)有嚴(yán)格意義上基線的概念,并且每個(gè)成行的文本都大致處于元素總高度的中間。這就意味著基于不同樣式和字體的文本精確對(duì)齊(基線對(duì)齊)需要進(jìn)一步手動(dòng),費(fèi)時(shí)的調(diào)整和像素級(jí)的輕移。

因此,我們?nèi)绾沃珠_(kāi)始實(shí)施css的基線?因?yàn)槿鄙僭幕€語(yǔ)法,快速到位或者瀏覽器功能性的強(qiáng)迫垂直對(duì)齊,我們留給以后的實(shí)驗(yàn)。我們先開(kāi)始最基本的css方法。

好的方法:基本的css基線

迄今為止,尚無(wú)形成統(tǒng)一的正確的方法來(lái)實(shí)現(xiàn)css基線,有的人只要使行高和間距遵循一套規(guī)范便已滿足,其他人則更為制作和細(xì)致——無(wú)論怎樣——只有每個(gè)成行的文本都漂亮的“坐落”在基線上,圖片,邊框,盒子和其他元素都完美的對(duì)齊相同的網(wǎng)格才能滿足。對(duì)所有人來(lái)說(shuō)的好消息是:基本的css基線真的一點(diǎn)都不難。通過(guò)一些預(yù)先的設(shè)計(jì)決策(和堅(jiān)持),它們只需要一點(diǎn)點(diǎn)的基礎(chǔ)數(shù)學(xué)。

定義你的基線,最好是從你所使用的最小文本開(kāi)始,大多數(shù)是你的body文本,基于此再往上計(jì)算。在我下面的例子中,我使用14px的font-size配以22px的line-height,也就是22px是我的基線之間的高度。這樣定義的結(jié)果是所有的line-height和所有元素的總高(包括邊框、內(nèi)邊距和外邊距)必須是22px的倍數(shù),如下:

					1
2
3
4
5
6
7
8
9
10
					h1{
	font-size: 40px;
	line-height: 44px;
	margin-bottom: 22px;
}
p {
	font-size: 14px;
	line-height: 22px;
	margin-bottom: 22px;
}

現(xiàn)在定義的line-height和font-size并不是最優(yōu)的,因此為了可伸縮性,將其轉(zhuǎn)換為em。如此一來(lái),會(huì)使得代碼有點(diǎn)難以閱讀,但是所用的數(shù)學(xué)相當(dāng)?shù)暮?jiǎn)單——只需要記住在更改font-size的使用重新計(jì)算line-height。

					1
2
3
4
5
6
7
8
9
10
					h1{
    font-size: 2.5em; /* = 40px/16px */
    line-height: 1.1em; /* = 44px/40px */
    margin-bottom: 22px;
}
p {
    font-size: 0.875em; /* 16px is the default em size */
    line-height: 1.5714285714285714em; /* = 22px/14px */
    margin-bottom: 22px;
}

注意,在通篇我都會(huì)以px為單位提及font-size和line-height,這樣能更加清楚的表明其“物理”大小和所給例子中的比例。然而,所有的代碼,我們都會(huì)轉(zhuǎn)換成em。
利用可見(jiàn)的網(wǎng)格(很多人使用png或者gif的背景圖,其他人使用諸如Baseliner的工具),我們可以檢測(cè)所有樣式的對(duì)齊。在此我們發(fā)現(xiàn)成行的文本并沒(méi)有“坐落”在基線上,相反漂浮在基線之間。在此階段這并沒(méi)什么要當(dāng)心的——我們可以簡(jiǎn)單的便宜我們的背景圖片,或者在body上放增加內(nèi)邊距(padding)來(lái)修復(fù)。

A visible grid can be very helpful during the design process.

一個(gè)可視的網(wǎng)格將對(duì)設(shè)計(jì)過(guò)程很有幫助

到目前為止一切順利,但我們的代碼仍然相當(dāng)?shù)幕A(chǔ)。但我們包含更多的屬性——比如上邊框——給所有的元素,將會(huì)發(fā)生什么?自然地,屬性值需要調(diào)整,使之合并邊框高度之后的總高度仍然是基線之間高度的倍數(shù)。

					1
2
3
4
5
					h1{
    border-top: 3px;
    padding-top: 22px;
    margin-bottom: 19px; /* 22px-3px */
}

Note how the 3 pixel border-top and the 19 pixel margin-bottom adds up to our baseline of 22 pixels.

注意,怎樣使得3px的border-top和19px的margin-bottom之和等于基線之間高度22px

使用SASS或者REM

盡管這的確不是什么高科技,但在復(fù)雜的網(wǎng)站中,特別是使用相對(duì)單位的時(shí)候上述的數(shù)字相加將會(huì)是個(gè)不小的挑戰(zhàn)。如果你愿意犧牲em的可伸縮性,堅(jiān)持使用px為單位,像SASS之類的預(yù)編譯語(yǔ)言可以解決一部分麻煩。使用SASS我們可以將基線之間高度定義為一個(gè)變量(在我的事例中為$baseline),并使用一次方程去定義它的倍數(shù)。以此來(lái)使得整個(gè)過(guò)程變得非常簡(jiǎn)單,也使得css更容易閱讀。在一般的過(guò)程中若你想重新dinginess你的基線之間高度,你只需改動(dòng)一個(gè)地方。盡管下面我的示例中使用Sass,當(dāng)使用rems也是一樣的道理——只在一處定義你的基線間高度,然后再整個(gè)代碼中生效。

					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
					$baseline: 22px;
 
.box {
    padding-top: 3px;
    height: $baseline*15;
}
h1{
    font-size: 40px;
    line-height: $baseline*2;
    margin-bottom: $baseline;
}
p {
    font-size: 16px;
    line-height: $baseline;
    margin-bottom: $baseline;
}

在圖片和復(fù)雜的布局上使用JavaScript

在簡(jiǎn)單的文字排版布局上使用基線網(wǎng)格要相對(duì)簡(jiǎn)單點(diǎn),但我們必須保證其他的元素相圖片也要對(duì)齊網(wǎng)格。對(duì)于容器,按鈕,和網(wǎng)頁(yè)分界線來(lái)說(shuō),通過(guò)css讓任何的單元都是基線間高度的倍數(shù),這是一個(gè)很重要的約定。但從另一個(gè)方面來(lái)說(shuō),圖片很少遵守這一約定,其一般為一系列任意的高度,因此在這樣的例子中,少量的JavaScript便可以幫我們的大忙。我不會(huì)在此深究,但是jQuery的插件Baseline.js和Matthew Wilcox關(guān)于垂直網(wǎng)格的文章倒是值得一看。如果你正在進(jìn)行一個(gè)復(fù)雜的布局,無(wú)妨看看FtColumnflow——一段“修復(fù)css多列布局缺陷”的代碼,它廣泛使用在音樂(lè)《金融時(shí)報(bào)》的web app上,并且如果你想找一個(gè)更為健壯的方案,它或許更加合適。

上述基礎(chǔ)的方案。通過(guò)保證我們的行高,內(nèi)邊距,外邊距,高度——任何的屬性——相加和總是等于基線間高度的倍數(shù),就可以保證我們整個(gè)垂直網(wǎng)格不受影響,這很簡(jiǎn)單,對(duì)吧?

當(dāng)然,如果接下來(lái)不繼續(xù)深入,你也不會(huì)看這篇文章了。

很爛的方案:任意可變式

壞消息是,大多數(shù)的設(shè)計(jì)師在受限的條件下工作,有時(shí)一個(gè)22px的基線間的高度對(duì)他們來(lái)說(shuō)更像是一個(gè)令人煩惱的阻礙,而不是有用的約束。例如,遵循黃分割的規(guī)則,一個(gè)16px的段落主體部分可以推導(dǎo)出26px的段頭(盡管下部段落主題可能適用高于20px的任何值,這取決于字體)。保持我們的基線間高度為22px,你或許會(huì)發(fā)現(xiàn)一個(gè)簡(jiǎn)單的22px的基線間高度的行距太窄了以至于不能舒適的閱讀,然而一個(gè)雙倍的基線間高度又顯得太寬了,只有在h2呈兩行顯示的情況下才會(huì)有這樣的爭(zhēng)論,當(dāng)然理論上可以假設(shè)列的寬度足夠的長(zhǎng),這樣折行就永遠(yuǎn)都不會(huì)發(fā)生,嗯哼,這只是理論上。

h2 at an awkwardly small or large line-height.

h2要么小的尷尬要么行高太大

如果在此有一種快速到位的方法,就不會(huì)發(fā)生上述的問(wèn)題,就像我們可以簡(jiǎn)單的將h2不應(yīng)用基線網(wǎng)格,看看緊隨它的短多是不會(huì)魔術(shù)般的落到正確的位置。遺憾的,并不存在這樣可行的魔法,我們只能實(shí)事求是的去思考找出一種解決方案。

在文章的開(kāi)始我曾推薦從你有著最小文本的line-height開(kāi)始定義你的基線間的高度,就像body的文本。正如我們所看到的,一個(gè)固定的,22px(或者你body line-height的任意值)的最小單元會(huì)使得固定字體的line-height值變得很不合適。但如果讓我們的原始的基線間高度減半會(huì)怎樣?技術(shù)上來(lái)講我們的body的文本就會(huì)有兩個(gè)基線間高度的line-height,但這只是紙上談兵。在大多數(shù)的示例中,這樣帶來(lái)的可變性和排版自由的結(jié)果是值得的,我們使用黃金分割的比例來(lái)快速的定義一些h元素的大?。ㄋ纳嵛迦耄3謊m值整潔),我們可以很容易的看到每次值得增加都會(huì)有一個(gè)合適的line-height值,例如:16px/22px ,28px/33px,40px/44px等。

					1
2
3
4
5
6
7
8
9
10
					h1{
    font-size: 2.5em;
    line-height: 1.1em;
    margin-bottom: 22px;
}
h2{
    font-size: 1.625em; /* 26px/16px */
    line-height: 1.2692307692307692em; /* 33px/26px */
    margin-bottom: 11px;
}

h1, h2, and p all aligning to the baseline grid.

h1, h2, 和 p都對(duì)齊了基線網(wǎng)格

丑陋的方案:偏移的方式

在我繼續(xù)之前,我必須承認(rèn)的是,下述的內(nèi)容完全是實(shí)驗(yàn)性的甚至你們其中一部分人甚至?xí)J(rèn)為它實(shí)踐起來(lái)也很糟糕。但如果你準(zhǔn)備繼續(xù)遷就我,即使它變得丑陋也繼續(xù)閱讀。好吧,我說(shuō)的丑陋是源于“代碼整潔”的觀點(diǎn)?;蛟S從設(shè)計(jì)的角度來(lái)說(shuō),它可能確實(shí)很漂亮。

基于上述的基本的方案和帶一點(diǎn)實(shí)用性(可選)的隨意可變得方案,現(xiàn)在我們有知識(shí)和工具去改善大多數(shù)布局的基線網(wǎng)格,但是對(duì)于真正基線卻沒(méi)有實(shí)現(xiàn)。正如前面所提到的,css中l(wèi)ine-height計(jì)算的方式意味著字符大約處于行距的垂直中點(diǎn),而不是字符的下邊緊挨著基線(先InDesign和Quark)。許多人理所應(yīng)當(dāng)?shù)恼J(rèn)為這就這是應(yīng)該的。這就是css中iine-height工作的方式,我們沒(méi)法改變。沒(méi)錯(cuò),但是我們的眼睛并不知道css的概念。我們的眼睛并不習(xí)慣去按照x軸中心去掃描成行的文字——它們習(xí)慣于跟隨字符的地步,基線來(lái)閱讀,并且當(dāng)相鄰行錯(cuò)位的時(shí)候可讀性就會(huì)變差。

來(lái)看一下下面的額例子:

					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
					h1{
    font-size: 2.5em;
    line-height: 1.1em;
    margin-bottom: 22px;
}
h2{
    font-size: 1.625em; /* 26px/16px */
    line-height: 1.2692307692307692em; /* 33px/26px */
    margin-bottom: 11px;
}
p {
    font-size: 0.875em;
    line-height: 1.5714285714285714em;
    margin-bottom: 11px;
}
p.intro {
    font-size: 1.125em; /* 18px/16px */
    line-height: 1.22222222em; /* 22px/16px */
    margin-bottom: 22px;
}

在相鄰兩列的情況且,盡管基線已經(jīng)正確的貫穿介紹段落,但介紹段落的字母的底部(下圖紅線)并沒(méi)有對(duì)齊和主段落對(duì)其,這正是因?yàn)樽煮w計(jì)算之后的line-height所導(dǎo)致。

CSS line-height makes alignment across adjacent columns inaccurate.

css中l(wèi)ine-height倒是夸列并沒(méi)有對(duì)其

現(xiàn)在到了它變丑陋的地方。為了能夠在所有列中的成行文本都對(duì)齊(當(dāng)然是最重要的一點(diǎn)是從基線網(wǎng)格開(kāi)始),我們必須手動(dòng)偏移樣式。一個(gè)簡(jiǎn)單的方法是增加padding-top的值直到字符緊挨到基線,并且相應(yīng)調(diào)整margin-bottom來(lái)彌補(bǔ)增加的值。

					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
					h1{
    font-size: 2.5em;
    line-height: 1.1em;
    padding-top: Xpx; /* This requires trial and error, as X depends on your font and line-height */
    margin-bottom: 22px-Xpx;
}
h2{
    font-size: 1.625em; /* 26px/16px */
    line-height: 1.2692307692307692em; /* 33px/26px */
    padding-top: Xpx;
    margin-bottom: 11px-Xpx;
}
p {
    font-size: 0.875em;
    line-height: 1.5714285714285714em;
    padding-top: Xpx;
    margin-bottom: 11px-Xpx;
}
p.intro {
    font-size: 1.125em; /* 18px */
    line-height: 1.22222222em; /* 22px */
    padding-top: Xpx;
    margin-bottom: 11px-Xpx;
}

混亂?也許是的。確實(shí)乏味。但同時(shí)也沒(méi)有什么能像施了魔法般的讓基線完美的對(duì)齊復(fù)雜布局一樣令人欣喜而愉悅了。

All elements align across multiple columns.

所有的元素多列對(duì)齊。

噓。如果你仍然還在閱讀,或許你要么是受虐狂,要么是對(duì)細(xì)節(jié)有著病態(tài)的迷戀,而對(duì)于后者,恭喜你,毫無(wú)疑問(wèn)你的基線就像外墻的磚一樣牢固。

這值得嗎?

下面是我們所有的?;A(chǔ)css的基線,相當(dāng)?shù)暮?jiǎn)單,只需要不多的數(shù)學(xué)和組織即可改進(jìn)你的布局。而在天平的另一端,我們可以手動(dòng)的調(diào)整padding和margin值來(lái)模擬像打印設(shè)計(jì)中精確的基線,這種概念無(wú)疑會(huì)讓純css主義者面帶愁容。更實(shí)在的問(wèn)題當(dāng)然是,手動(dòng)的偏移樣式對(duì)視覺(jué)效果帶來(lái)好處是否值得。在某種情況下,比如設(shè)計(jì)驅(qū)動(dòng)的項(xiàng)目和微型站點(diǎn)中,這確實(shí)值得。

其他情況,大部分的情況是,對(duì)于更為復(fù)雜的站點(diǎn)(你的項(xiàng)目經(jīng)理會(huì)絞盡腦汁想知道你為什么需要花那么長(zhǎng)的時(shí)間來(lái)構(gòu)建初始模版)或者由數(shù)個(gè)開(kāi)發(fā)者維持同樣的代碼的協(xié)作性項(xiàng)目,這樣確實(shí)不值得。我們需要面對(duì)的是——我們所談?wù)摰脑谀承O端的例子中不僅會(huì)增加體力勞動(dòng),而且會(huì)讓代碼變得更為負(fù)責(zé)和難以維護(hù)。在一個(gè)足夠的大的項(xiàng)目中甚至?xí)绊懩阏军c(diǎn)的加載時(shí)間。

但是想想看,僅僅是幾年前,從行業(yè)領(lǐng)袖到黑客很少有人提倡并不討巧的“sliding doors”技術(shù),但現(xiàn)在css3已經(jīng)讓它變得司空見(jiàn)慣。使用兩個(gè)div而不是一個(gè)來(lái)實(shí)現(xiàn)圓角這是否值得?很顯然,對(duì)一些人來(lái)說(shuō)是值得的——但其他人認(rèn)為就是浪費(fèi)時(shí)間,導(dǎo)致了實(shí)施的困難和語(yǔ)義上有缺陷的代碼。但是關(guān)鍵的一點(diǎn)是:如果沒(méi)有人嘗試如此勞力和代碼密集的技術(shù),我們可能不會(huì)有成熟語(yǔ)法的技術(shù)時(shí)代了。

實(shí)驗(yàn)性的,糟糕的體驗(yàn),hacks,丑陋的代碼——無(wú)論我們?cè)鯓臃Q呼它——它已經(jīng)推出了,并且將會(huì)繼續(xù)推出,我們的語(yǔ)法會(huì)改善,我們將使用新的工具來(lái)創(chuàng)建和發(fā)布下一代的在線內(nèi)容。為了回應(yīng)Mark Boulton的“若css能夠無(wú)痛的創(chuàng)建基線網(wǎng)格這將會(huì)有多酷”無(wú)論你的執(zhí)念有多強(qiáng)——無(wú)論你的字符是緊挨著基線或者懸浮在基線之間——垂直網(wǎng)格都會(huì)是一個(gè)重要的思路,使用任意本文所列的方法都會(huì)給你一個(gè)滿意的基線網(wǎng)格。

當(dāng)然,會(huì)有一些例子比較難以實(shí)施網(wǎng)格的約束,像一些元素如,題注,導(dǎo)航或者列表項(xiàng)目好像不能正確的對(duì)齊到預(yù)先定義的結(jié)構(gòu)中。在這些例子中,需要注意的是一些妥協(xié)并不是世界末日。一些設(shè)計(jì)時(shí),像杰出的設(shè)計(jì)時(shí)Khoi Vinh,認(rèn)為基線在你內(nèi)容主體的上下文才最為重要,一些次要的元素可以在不破壞布局的情況下不遵守基線對(duì)齊。

希望能夠理解的是在此并沒(méi)有正確或者錯(cuò)誤的實(shí)現(xiàn)基線的方法,這也會(huì)激勵(lì)你在將來(lái)能夠后在你的項(xiàng)目中嘗試,在此我也鼓勵(lì)任何一個(gè)喜歡排版的人貢獻(xiàn)這個(gè)正在進(jìn)行的項(xiàng)目,能在未來(lái)的的網(wǎng)頁(yè)設(shè)計(jì)中讓垂直網(wǎng)格和水平網(wǎng)格同等重要。

好運(yùn)!

資源

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/wd1266.html
網(wǎng)頁(yè)首頁(yè)優(yōu)化-圖片延遲加載
根據(jù)文字長(zhǎng)度自動(dòng)伸縮的網(wǎng)頁(yè)標(biāo)題
圖趣網(wǎng)微信
建議反饋
×