語言

這是一份翻譯。 與 英文版本 相比,它可能包含錯誤或者過時。 翻譯員:Samuel Chong of Chinese Translation Services through its pro bono translation services

網頁樣式表 CSS提示與竅門

請見 索引 查看更多提示.

折疊表列

下面的兩個表格可以完整顯示或省略一個或多個列。 此頁面演示兩種方法在不同視圖之間切換。

第一個例子表
Item Info Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
First 1st 56 28 85 24 67 27 67 20 21 74 45 48
Second 2nd 34 28 84 74 95 77 21 31 54 34 84 47
第二個例子表
Item Info Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
First 1st imo boo ba fie ro ore yu ek quo phe lei ats
Second 2nd eu eo suh ohn hye lef wa bu orf ir soi se

'visibility' 屬性

通常,要隱藏元素的視圖,你會使用'display'屬性並將 其設置為'none'。但是CSS也有一個屬性叫 'visibility',可以不同的方式隱藏元素。特別是,我們在這裡使用專門為隱藏表列和行而設計的'visibility:collapse'。

使用此方法,當實際計算表格的佈局時,折疊列 仍然存在,但該列並不會顯示。 效果是將未使用的空間留在表的右邊緣。

'collapse' 值是由於交互使用:首先所有列都是可見的, 然後有些東西(我們將在下面看到那樣東西)改變從'visible'到 'collapse'的某些列上的'visibility'值。這些列消失,但其餘列的 內容不會以任何方式更改。這些列只是靠近在一起。當值變回'visible'時, 折疊的列將重新顯示及其他列向後移動,同樣沒有改變任何儲存格的佈局。 這不僅使該過程快速,它也幫助你的眼睛識別每個移動後的列。

要在表列上放置樣式規則,文檔中必須有表示這些 列的元素。在 HTML, 那些是<col> 元素。 上面表格的HTML代碼如下所示:

<table>
<col>
<col>
<col class=m01>
<col class=m02>
<col class=m03>
<col class=m04>
<col class=m05>
<col class=m06>
<col class=m07>
<col class=m08>
<col class=m09>
<col class=m10>
<col class=m11>
<col class=m12>
<thead>
<tr>
<th>...

類屬性使得更容易編寫樣式規則。 其中一個樣式規則是:

col.m04 { visibility: collapse }

這折疊任何與類m04的列。接下來,我們需 要一種方法來打開和關閉此規則。

交替樣式表

第一種方法涉及交替樣式表(請見文章 "交替樣式表").這個頁面 有不少於十一種交替樣式稱為"View for...;" 對應於十一 種不同的方式來顯示表。 HTML代碼如下所示:

<link
  rel="alternate stylesheet"
  href="foldingstyle/month02.css"
  title="View for February">
<link
  rel="alternate stylesheet"
  href="foldingstyle/month03.css"
  title="View for March">
<link
  rel="alternate stylesheet"
  href="foldingstyle/month04.css"
  title="View for April">
...

每個這些交替樣式只有兩行:一行是要導入預設樣式表, 和一行是用於折疊相關列。例如:這是個完整的 month04.css檔案。 它隱藏.m01,.m02和.m03列, 即是,1月,2月和3月的列:

@import "../../CSS/w3c-2010/main.css";
.m01, .m02, .m03 { visibility: collapse }

交替樣式表是一種簡單的方法.。如你所見, 樣式規則簡單明瞭。 另一方面,在樣式之間切換通常不是很快, 因為使用者必須從功能表中選擇一種樣式。這涉及多個滑鼠移動或幾個按鍵。

':target'選擇器用法

第二種方法依賴於':target'選擇器。它選擇(最多一個) 文檔中作為連結目標的元素,該連結是您跟隨以到達該文檔的目標。 (請見文章"指定介面"查看更多有關 ':target'.)

我們可以使用這個選擇器來根據哪個元素是當前目標來 以不同的方式設計表格。然後,我們只需要提供指向這些目標的 連結,每次點選連結,不同的元素會成為目標,並應用不同的樣式 。

我們需要在文檔中盡可能多的潛在目標,因為我們有不同的樣式, 以及到這些目標的超連結 此網頁使用空的<div> 元素作為目標 並將&lt;a&gt; 元素放在列標題中:

<div class=hack id=view02></div>
<div class=hack id=view03></div>
<div class=hack id=view04></div>
...
<table>
...
<th><a
 title="Click to hide earlier columns"
 href="#view02">Feb<a>
<th><a
 title="Click to hide earlier columns"
 href="#view03">Mar<a>
<th><a
 title="Click to hide earlier columns"
 href="#view04">Apr<a>
...

(標題屬性解釋了每個連結會發生什麼.)

這些額外的<div><a>元素沒有其他功能能支援 樣式,這就是我稱這種方法為hack的原因。 在未來的CSS擴展中,可能會有一種直接切換元素樣式 的方法(請參見下面)。

樣式規則有點複雜。這裡是其中之一:

#view02:target ~ * .m01 {
  visibility: collapse }

如果它是一個元素的後代,它本身就是具有ID"view02"的 元素的下一個同級元素,並且是當前目標,那麼它將折疊元素.m01。 有關完整的規則集,請參閱 "view.css"樣式表。 (這裡有66個對於這個特定的例子,)

這些規則允許讀本通過點擊列標題來顯示和隱藏列. 一個額外的優點是每種不同的方式顯示表都有自己的URL。例如: http://www.w3.org/Style/Examples/folding#view06 打開包含已經隱藏的列Jan,Feb,Mar,Apr和May的頁面。

一般來說,當您跟隨連結時,流覽器滾動視窗, 使目標元素顯示在頂部附近。在這種情況下, 目標從視圖中隱藏:

.hack { display: none }

沒有規範定義流覽器在那種情況應該滾動到哪, 但希望它根本是不滾動。

衝突模式

由於此頁面使用兩種不同的方法折疊列,因此必須優先 選擇其中一種方法。在這種情況下, 替代樣式將勝出 如果您選擇了"View for June"樣式,然後點擊八月列,六月列將不會收合。

然而,很容易扭轉這種先後順序。 帶有':target'規則的樣式表的連結如下所示:

<link
  rel=stylesheet
  href="foldingstyle/view.css"
  title="Main">

這意味著樣式表僅與稱為"Main"的其他樣式一起載入, 而不與稱為"View for&hellip;"的任何樣式一起載入。 只是刪除title屬性就足以使樣式表適用,無論載入什麼 樣的替代樣式。

限制與一個可能的未來

此頁面顯示兩個表,其列以相同的方式 折疊和展開,這是為了說明這兩種方法的限制: 事實上,不可能獨立地折疊兩個表中的列。

正如以上所述,帶有':target'選擇器的方法需要在 源中添加額外的元素。此外,如果您想使用超連結作其他用途, 比如說,用於目錄,那麼你不能再使用它們來折疊表。 (另一方面,) (On the other hand, 你可以用':checked'選擇器 而不是':target'選擇器來構建一個類似的技巧。 這釋放了超連結,但有其他約束。)

由於這些原因,CSS應該最終得到一個功能去直接 在一個元素的兩個或多個樣式之間切換,而不需要顯式的超連結。

直到二零一一年七月,CSS工作組尚未發佈具有這 樣的功能的工作草案,但些有想法。 一個這樣的想法是引入偽類':alternative'。規則如

ul:alternative { content: "+" }

將意味著&lt;ul&gt; 元素可以在兩個 狀態之間切換,並且當使用者將元素切換到第二可選狀態時, 顯示"+"而不是元素的內容。

Bert Bos, style activity lead
Copyright © 1994–2018 W3C®

創建於 7 July 2011;
最後更新 2018年01月12日 星期五 20:13:27

語言

關於翻譯