跳過導覽列

O3noBLOG

A Happy(?)Designer ~~

CSS & HTML

拾月 22

IE8標準模式將不支援CSS expression

IEBlog的消息,CSS expression就是可以在CSS value裡面進行一些簡單運算,像是「10%+4px」這樣的長度設定,雖然記憶中W3C也曾經有過草稿,不過總之這就是不太有人使用的東西,所以一直以來也只有IE支援,然後這次IE Team終於決定要把它拿掉了,不過Ajaxian上的第一篇回文很XD:

I can't believe they're doing such big changes and don't want to rename their XMLHttpRequest object... pff...

拾月 11

YUI Compressor

這東西好像很久以前有看過一次,那時不知道為什麼沒深入接觸(或許是看到java就逃跑了),期間還有試過perl的javascript compressor,不過用起來都不是很方便,直到前陣子看到DK示範了一下才又提起興趣,可惜我的blog剛搬離研究室的電腦,而且linux上也不像FreeBSD上有port好的,所以就變成需要在windows下使用,用命令列操控是還算方便,不過因為是包成jar檔,檔名又蠻長的,打命令的時候還蠻辛苦的,所以就寫了個batch檔案來處理:

SET PP=D:\tools\yuicompressor\
java -jar %PP%yuicompressor.jar --charset utf-8 %1 %2 %3 %4 %5 %6 %7 %8 %9

確定檔案路徑和基本的選項之後,把這個batch檔丟到path下的目錄,以後就可以用這個指令來壓縮js和css檔了,不過在我自己的電腦上還有遇到別的問題,就是.bat檔不會真的執行,不知道做了什麼事才變成這樣,總之又去找了bat2exec把bat檔轉成com檔,不過這個小程式出處不明,希望沒有什麼木馬在裡面@@。

事後感想是windows的命令列能不能好用一點啊Q_Q。

玖月 13

CSS TIP - 縮排和文字垂直置中

今天要來介紹的這個CSS TIP,一部分是為了應付IE的box model才出現的。

首先,我有一個固定寬高的頁首區塊,也就是我接下來要介紹的CSS TIP所可以應用的地方,這種頁首區塊內的文字通常只有一行,其他類似的物件還有各種標題(h1~h6)、導覽列清單(li)等。這些區塊物件在還沒有任何設定的時候,裡面的文字通常都是貼齊左上角的,這邊舉一個 h1標題 的例子,它的 CSS Code 如下:

h1 {
    font-size: 200%;
    color: #fff;
    background: #000;
    height: 100px;
}

顯示結果如下:

閱讀 「CSS TIP - 縮排和文字垂直置中」 全文 捌月 28

CSS大師的10條原則

原文:10 Principles of the CSS Masters

1. 保持CSS簡單乾淨 - Peter-Paul Koch

少用CSS hack。

2. CSS宣告盡量放進一行 - Jonathan Snook

舉例來說:

body {margin: 0; padding: 0; background: #fff;}

不過這工作我覺得交給機器來做比較好。

3.使用簡化的寫法 - Roger Johansson

使用如下的簡化寫法:

border-width: 0 1px 2px 3px;

而不是用border-top-width、border-right-width、border-bottom-width、border-left-width分開設訂定。

4.讓區塊元素自己填滿空間 - Jonathan

設定width的話,就不設定margin、padding,設定margin、padding的話,就不設定width,這樣可以迴避掉IE的box model錯誤。

5.用float元素自己clear float - Trevor Davis

其實是利用:after { clear: both; }來做啦。

6.使用負的邊界直 - Dan Cederholm

讓物件突出更顯眼。

7.使用CSS把版面置中 - Dan Cederholm

固定寬度的版面配置,盡量使用CSS把內容置中。

8.使用正確的DOCTYPE - Jeffrey Zeldman

好處多多。

9.使用CSS把物件置中 - Wolfgang Bartelme

雖然不是指整個版面而是指所有想要置中的東西,不過原文的例子還是把網頁主內容來置中,結果和第七點蠻容易混淆的。

10.善用大小寫轉換 - Trenton Moss

和中文語系使用者關係不大。

最後看下來,扣掉第10點,9點中我有7點有做到吧...

參月 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這篇文章提到的網路字型,剛剛測試過後中文也支援,繪圖速度比較慢,另外字型下載完之前字都不會畫出來,而中文字型檔案果然大,我的螢幕黑掉一次才抓完,目前看來在有漢字的語系還是不實用。

此類別所有文章


其它資訊

關於本網站

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

分類彙整

我在看什麼

訂閱本網誌

貼紙

時間がない


認證、授權

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