Stylet 小豬圈

2013-08-31

CSS 以圖取代文字

用 CSS 將文字以底圖取代，實例可參考 CSS Zen Garden。
另外還得考量無障礙 (Accessibility) 和搜尋引擎最佳化 (SEO)

display: none

<h1><span>Headline 1</span></h1>

h1{
  background: url(headline1.png);
  width: 200px;
  height: 100px;
}
h1 span{
  display:none;
}

需要額外的元素

visibility: hidden

<h1><span>Headline 1</span></h1>

h1{
  background: url(headline1.png);
  width: 200px;
  height: 100px;
}
h1 span{
  visibility: hidden;
}

基本上和 display:none; 一樣，只是有佔空間

text-indent: -9999px

<h1>Headline 1</h1>

h1{
  background: url(headline1.png);
  width: 200px;
  height: 100px;
  white-space: nowrap; /* 設為不換行，使內容集中在一行 */
  text-indent: -9999px;
}

好處是不需要額外的標籤

text-indent: 100%;

<h1>Headline 1</h1>

h1{
  background: url(headline1.png);
  width: 200px;
  height: 100px;
  white-space: nowrap; /* 設為不換行，使內容集中在一行 */
  text-indent: 100%;
  overflow: hidden;
}

同上，但可避免讓瀏覽器建立一個大而無用的格子

2013-03-28

開啟 ASP.NET 除錯

這是在修改遠端 ASP.NET 網站遇到的問題，伺服器預設會避免顯示詳細的錯誤資訊並導向錯誤訊息面頁，立意良善但要除錯就麻煩了…

修改 web.config ：

<?xml version="1.0"?>
<configuration>
  <system.web>
    <customErrors mode="Off"/>
    <compilation debug="true">
    </compilation>
  </system.web>
</configuration>

2013-02-09

Chrome 會自動啟用 Flash plug-in

剛更新完 Flash 後才發現的，還以為我電腦中毒咧！(Google Chrome 24.0.1312.57 m, Win 7, Adobe Flash Player 11.5.31.139)
目前解決辨法：將C:\Users\Username\AppData\Local\Google\Chrome\Application\24.0.1312.57\PepperFlash 這個目錄給改名。
SimpleRNA: Google Chrome Auto-Enables Flash, Degrades User Experience
Pepper Flash Will NOT stay Disabled - Enables Itself Every Day - Google 網上論壇

2012-11-12

使用 <img> 或 CSS/background-image 的時機

<img>:
- 適用於“屬於內容”一部份的圖片，像是旅遊的文章與其相片
- 使用 alt 屬性，有利於無障礙設計
CSS/background-image:
- 適合用於“不屬於內容”一部份的圖片，像是清單圖示、裝飾用圖
- 可以用於“以圖代文”，參考 css Zen Garden 裡用底圖取代標題文字的作法
- 可以使用 CSS sprites 減少下載次數與頻寬
- CSS2 還無法縮放圖片大小 (CSS3/background-size)

參見：html - When to use IMG vs. CSS background-image? - Stack Overflow

2012-09-07

在 Google Calendar 顯示農曆日期

剛剛才知道 Google 日曆可以顯示農曆(陰曆)。到“設定”裡選擇“非公曆”即可。

2012-07-31

CSS height:100% 無法佔滿畫面整個高度

結論：連 html 與 body 都要設定 height:100%

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
html
{
  height:100%;
}
body
{
  height:100%;
  margin:0;
  padding:0;
}
div
{
  border:1px solid black;
  background:green;
  height:100%;
}
    </style>
  </head>
  <body>
    <div>long long long long long long long long text with break</div>
  </body>
</html>

表格(table, td) 的 overflow 屬性無作用

直接記結論如下：
table 要加上 table-layout:fixed 的屬性
table 要設定寬度 width 的屬性，僅有 td 設定寬度是不夠的！
如果連有空格分隔的段落也要隱藏，則加上 white-space:nowrap
「overflow:hidden」！

2012-07-13

Flash 11.3 頻當機

更新 Flash 後一直當機，解法參見下列鏈結：
http://support.mozilla.org/en-US/kb/flash-113-crashes

2012-07-06

SQLite 預設時區為GMT

若將 SQLite 資料庫裡的時間欄位，設為自動填入目前的時間(如下例)，則預設時區一律是 GMT(+00:00) ，而非 php.ini 所設定的時區。

CREATE TABLE table_name
(
  col_name DATETIME DEFAULT CURRENT_TIMESTAMP
);

解決方案之一是從 PHP 裡轉換：

<?php
$get_datetime_form_sqlite = '2009-03-21 13:14';

$myDateTime = new DateTime($get_datetime_form_sqlite, new DateTimeZone('GMT'));
echo $myDateTime->format(DateTime::ISO8601);
//output: 2009-03-21T13:14:00+0000

$myDateTime->setTimezone(new DateTimeZone('Asia/Taipei'));
echo $myDateTime->format(DateTime::ISO8601);
//output: 2009-03-21T21:14:00+0800

另外就是做 SQL 查詢時轉換：

SELECT datetime(col_name, 'localtime') FROM table_name;

2011-09-08

純 CSS 式預載 :hover 圖片

<style type="text/css">
.button
{
  background: url("button_hover.png");
}
.button div
{
  background: url("buttonr.png");
}
.button div:hover
{
  background: url("button_hover.png");
}
</style>
<div class="button"><div></div></div>

其實就是先把 :hover 所需圖片，先放在下面。

這只適合同大小，非透明的圖片。
預載的時間點就和其它圖片一樣，而不像用 javascript 可以設定在網頁載入之後。

2011-09-07

IE <button> 送出非預期的值

<button type="submit" name="foo" value="bar">text</button>

上面這段一般會預期送出bar，但在IE7之前的版本會送出text。

這次專案客戶反應表單不能使用，在各瀏覽器(IE、FF、Chrome、Opera)都試過後，才在IE8的相容性檢視才發視這個問題。

其實這問題之前就知道了，只是長久下來只記得不要用 <button> ，久而久之就忘了“為什麼？”。這次使用 <button> 只是單純為了讓有多個送出按鈕的表單，其按鈕所顯示的文字與送出的值分開，再加上沒有用 IE6/ 7測試，就被這個老問題給再炸了一遍。

2011-07-25

AXIMcom X-116NX

From 2011-07-25

前天家裡新增了一台路由 X-116NX，試著啟用其內建的 VPN/PPTP server，卻遇到了“可以登入VPN 但無法上網”的問題，最終解決方法是輸入自訂的DNS即可。

2011-07-05

1000m/30min

今天第一次試著不休息，持續游個一千公尺，約三十分鐘，跟預期差不多。

2011-07-04

舔一口試試

好吃！

2011-06-05

當超過一定程度後

此圖引用自命名-RIVER's 543-新浪部落

信仰過了頭，就是瘋狂。

註：這篇漫畫的內容被改過了…

2011-05-05

收到 Android 2.3.4 更新

2011-04-16

PHP 在 Windows 下的 Unicode 檔名問題

簡而言之…無解！ (爆)
要等到PHP6原生支援Unicode才行。

2011-01-26

Android 2.2.2 更新

更新後出現了SD卡損壞的訊息，檢查磁碟錯誤無效後，只能格式化解決了(淚)。

2011-01-23

看啥！？

我家老黃最近愛上我的大腿了！不讓牠坐大腿會生氣咧。

2011-01-12

惡．即．死

如果這世上的每個人都得到一種超能力(被動技能)，就是你心目中認定的壞人會直接死亡！。

那麼，人類會滅亡嗎？