跳過導覽列

O3noBLOG

A Happy(?)Designer ~~

CSS & HTML

參月 17

tfoot

tfoot是table裡面用來把表格列群組化用的標籤之一,專門用在表格底端的表格列,不過要注意的是他不能放在tbody之後,而是要用thead、tfoot、tbody這樣的順序才對。

壹月 23

W3C發佈HTML 5 Working Draft

W3C剛發佈的HTML 5 Working Draft,正熱,不過太晚了,我已經沒力看改了什麼東西,明天醒來應該也可以看到不少評論了吧。

不過我其實還是快速看過目錄,nl(navigation list)和h(heading)好像不見了。

壹月 17

Eric Meyer 更新 style resetting

Resetting Again這篇文章中,Eric Meyer更新了好幾個月沒修改過的style resetting(好像一直沒正式的名稱),真的改的地方其實不多,主要的修改是原來是設定為繼承的幾個地方,其他還有一些小變動,以下是完整code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

給不知道這是什麼的人

這段CSS是用來把各種瀏覽器的預設樣式覆蓋掉,把整個網頁變成沒有樣式的狀態,h1、h2、p等標籤都會是一樣大小的字體、字集,使用方法就是在任何你自己的CSS之前先在網頁上套用這段CSS。

拾貳 30

HTML 4 10年了

就在前兩週的18號,HTML 4堂堂邁入第10年,這10年過去了,後續的規格也推出不少,像是HTML 4.01XHTML 1.0XHTML 1.1,不過現在比較被推薦來使用的卻還是1999年推出的HTML 4.01,10年過去只增加了0.1版,還真是有股淡淡的哀傷啊,不過這也沒辦法,網路標準的制定和普及與一般程式語言不一樣,不只是W3C制定好就好,瀏覽器還要支援,接著還要等普羅大眾都有更新,網頁開發人員願意用,每個新標準制定出來到普及都有好長一段路要走(想像還要10年才制定的完的CSS3普及的那一天),在這條路上有個地方過不去,基本上就是失敗了,XHTML就是這樣,以Tim Bernes Lee理想的語意網來說,讓文件的語意結構完整是必要的,不過XHTML卻一口氣跑的太多步,先不看XHTML 2.0草案的改動程度,光是XHTML 1.1就已經讓網頁開發人員叫苦連篇,真正的XHTML 1.1要修改mime/type,也因此只要有一點錯誤,網頁就呈現不出來,語法又要求很嚴謹,可以用的entity只有三個,這三個符號不是做標籤使用時就一定要用entity表示之,不然網頁也會掛掉...etc,實在是麻煩一堆,然後看著XHTML 2.0更可怕的草案,終於瀏覽器開發者決定自己跑出來制定HTML 5,還有強化版的Web Forms 2.0,在一千零一網中,Tim Bernes Lee就提到他認為網際網路上的流通資訊和標準不應該為任意單一企業或組織所壟斷,即使是W3C也一樣,所以,最後W3C終於決定重組HTML Working Group,接納HTML 5進入,讓下一版功能更完整,編寫也容易的HTML標準的出現,露出曙光!

我想,大概再等個10年就可以用了吧。

拾月 11

divitis

Divitis,指在編寫網頁原始碼時,過度使用div標籤的人,剛好看到個範例,就是巴哈姆特,打開原始碼來看,在body內,不看script標籤,一開始就是:

<div class="container">
<div class="mainOut">
<div class="main">
<div class="left">

然後最後面則是:

</div>
</div>
</div>
</div>
拾月 05

web-kit支援網路字型

今天的消息,web-kit已經可以支援之前在web fonts這篇文章提到的網路字型,剛剛測試過後中文也支援,繪圖速度比較慢,另外字型下載完之前字都不會畫出來,而中文字型檔案果然大,我的螢幕黑掉一次才抓完,目前看來在有漢字的語系還是不實用。

捌月 30

web fonts

A List Apart最新一期裡的CSS @ Ten: The Next Big Thing這篇文章裡面,提到接下來CSS會發展的一個主要方向,就是網路字型(web fonts),這其實也不是新東西,早在1998年的CSS2裡面就有font-face,不過很不幸的,IE和Netscape都不支援truetype字型,結果網頁設計師都沒在使用,然後到了CSS2.1這功能也被屏棄了,現在這功能有希望回來了,不過其實我不是很樂觀啦,或許web fonts會回到CSS,不過等CSS 3制定出來不知道還要多久(個人推測10年),而且更大的問題是中文字型和歐美語系字型的大小差很多,如果做到像PDF可以只包含需要的部份,那變成伺服器端要支援,想起來就是一整個很難實行,中日文這些有漢字的地方大概還是只能繼續用系統有內建的字型和圖片吧。

捌月 29

CSS設定背景時

最近逛網站時比較常發現的小問題,很多人在設計版面時,為了質感或是排版會使用背景圖,而使用了背景圖,不過使用了背景圖,卻沒設定背景色,這樣會有什麼問題呢?

閱讀 「CSS設定背景時」 全文 柒月 24

襯線字/無襯線字

Firefox的字型設定有比例字型、襯線字型、無襯線字型和等寬字型四種可以分別設定

在調整瀏覽器、設定網頁字型的時候,我常常會看到襯線字非襯線字這兩個名詞,不過一直不了解差異在哪裡,直到前陣子看完寫給大家的平面設計書後才終於了解。

閱讀 「襯線字/無襯線字」 全文 柒月 10

用圖片製作文字輸入框

理論上是可行的,最近有想重新設計搜尋欄位的樣子,所以就先做了一個範例,不過因為還沒畫出漂亮的圖,所以看來很陽春,目前這版還有些缺點,主要是不能自動調整長度,如果說要調整字體大小也能自動縮放的話,目前似乎還辦不到就是,基本原理就是用背景圖。

此類別所有文章


其它資訊

關於本網站

本網站是O3(othree)的個人部落格,主要內容為網路標準、網頁設計,穿插些ACG心得和敗家紀錄,如果需要聯絡我請寄信到

分類彙整

我在看什麼

訂閱本網誌

貼紙

時間がない


認證、授權

XHTML, CSS,WCAG,創用CC 姓名標示-相同方式分享