Image Replacement with State Scopes

Image-Replacement-with-State-Scopes

Front-end developer 一定對傳統的 css image replacement 很熟悉:先為文字設定一個背景圖片,再把文字用負數的 text-indent 隱去,這樣一來一往就只剩下圖片了。以前學習 css 時,都說這個方法有個優點,就是在沒有 css 的情況下(如手機、Google 的 bot),網頁依然保持可讀。只是,這方法在有 css 卻沒有圖片的情況下則表現得一團糟了:圖片沒有了,文字也沒回來。

最近有人提出一套叫 State Scopes Method 的辦法,可解決以上提到的這個問題。解決方法是這樣的:先測一下瀏覽器是否能夠正常顯示圖片,正常的話才做 image replacement 的工作。

但這個辦法的缺點也很明顯:需要用到 Javascript,寫 css 時也變得麻煩。下面是一段 css

h1 {
  width: 100px;
  height: 50px;
}
@media screen {
  .images-on h1 {
    text-indent: -10000px;
    background-image: url(image.png);
    overflow: hidden;
  }
}

其實我個人覺得舊方法已經足夠好了,實在沒必要為了那一小部份人(可能是零)花這麼多功夫去完善 css。這些知識,知道就好了。

詳情請參考:The State Scope Method of CSS Image Replacement

----完----

在下現在是 香港中文大學 計算機科學系 一年級生。

對一件事情很不滿,身為香港的中文大學,為甚麼要捨香港通譯「電腦」不用,反而跟隨國內譯法把 computer 譯成「計算機」呢?

This entry was posted in Web Design. Bookmark the permalink.

13 Responses to Image Replacement with State Scopes

  1. kin ko says:

    恭喜你入了心水學科。(那我算是你師兄了:)

    計算機科學這個譯名幾十年歴史了,況且不是國內才譯作計算機,我覺得說不上是跟隨國內譯法(雖然我也反對在很多其他情況使用大陸中文)。

  2. wilson says:

    補充:
    工程學院的其他學系, 都是「一個學科 = 一個學系」. 所以, 「兩學科 = 一學系」是我們獨特之處, 部份設施也是跟computer engineering share的.

  3. Doesn't Matter says:

    台灣的 Computer Science 或 Computer Engineering 以前也叫計算機開頭學系,但不知什麼時候全部改成資訊開頭的學系了。不過台灣理工學系的學生,幾乎都會修一門課叫「計算機概論」,計算機這詞恐怕只遺留在課程名稱上了。

    訂閱您的 Blog 已久,突然冒出頭來閒聊,請勿見怪。:)

  4. 某人 says:

    大陸中文怎麼了?
    先不說「計算機」這個詞彙是不是大陸中文。
    中文的使用講究的是信、達、雅,無論是什麼中文,哪怕是和式中文,只要符合原則都可以拿來用,正·大·光·明的用!
    最愚蠢的行為莫過於為了反對而反對。

  5. 某人 says:

    Computer本來的就是為了計算而發明(可以從Wikipedia獲取這方面的資訊)
    譯作電腦反而體現不出其本意,所以電腦是最精確的譯法。
    本來不想說,不過覺得作者你有點走火入魔所以隨便說幾句,至於聽或不聽那是您的自由

  6. 某人 says:

    電腦是最精確的譯法 // 抱歉,應當是計算機

  7. 未上市 says:

    提供未上市公司資料、行情、股務、中籤書、股價報價等電子報服務及資訊。

  8. 提供超過3000支未上市興櫃股票全台即時報價系統,詳盡個股資料與每日新聞。

  9. 提供即時資訊、買賣行情、興櫃股票及未上市公司基本資料、財務報表等。

  10. 未上市 says:

    提供未上市股票、興櫃、準上市、零股,來電詢問,即時回報。

  11. winson says:

    新鮮人! 我是你剛畢業的學長呀… haha~~
    我也覺得譯作「計算機」沒有甚麼問題
    還是迎新營時John 已經沒有再解釋? lol

    p.s. 樓上的wilson 是奶媽嗎??

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>