memo.xight.org

日々のメモ

カテゴリ : CSS

2ページ目 / 全4ページ

CSSを利用した画像置換による懸念事項

Posted on | Tagged : , ,

CSSを利用した画像置換によるアクセシビリティ上の懸念

CSSによる画像置換は「CSSが有効，かつ画像は非表示」という閲覧環境で，文字も画像も表示されなくなる．

ナローバンドでインターネット接続をしているユーザが，帯域を有効活用するため，
「CSSが有効，かつ画像は非表示」の設定を行っている可能性がある．

ミツエーリンクスの意見は

コンテンツとして有意な画像，文字情報を含んでいる画像については，
CSS側から表示を制御するよりも，img要素として (適切なalt属性値とともに) マークアップしたほうが，
アクセシビリティ的には好ましいでしょう．


CSSを利用した画像置換によるSEO上の懸念

非可視化されるテキストの内容が，置き換えられる画像の内容が等価ではないと考えられる場合，
SEOスパムとして認められる可能性がある．

テキストと画像の内容が等価であれば問題はない．
また，画像が表現している情報とテキストの内容の等価性を機械的かつ自動的に検証することは困難．

よって，CSSを利用した画像置換を利用しても問題ないと考えられる．

Reference

ミツエーリンクス - Web標準Blog - 2005-06-10 - 画像置換という手法
http://standards.mitsue.co.jp/archives/000038.html

ミツエーリンクス - Web標準Blog - 2006-02-24 - 画像置換とSEOスパム
http://standards.mitsue.co.jp/archives/000153.html

456 Berea Street - 2005-10-21 - Google, SEO and using CSS to hide text
http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/

CSS と JavaScriptを利用した訪問済み，未訪問サイトを分析

Posted on | Tagged : ,

Demo

Tapping into your browser history
http://icant.co.uk/sandbox/nickhistory.html

Reference

techfoolery - 2006-08-21 - A New Way of Tracking Users' Browsing Habits
http://techfoolery.com/archives/2006/08/21/2042/

via

phpspot開発日誌 - 2006-08-25 - CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析
http://phpspot.org/blog/archives/2006/08/cssjavascriptor.html

CSS圧縮サービス色々と比較

Posted on | Tagged :

Summary

以下の6つのサイトを使って，CSS圧縮サービスのIcey Compressor, Clean CSS[2006-06-19-17], CSS Optimiser, Flumpcakesを比較．

Digg.com
Slashdot
Filmsy
iBegin
Download.com
ESPN

結果

Site CSS Optimiser Icey Compressor Flumpcakes Clean CSS
Digg.com failed failed failed 16.8%
Slashdot 17.45% 51.21% 9% 21.9%
Filmsy 18.85% 47.08% 17% 29.1%
iBegin failed 55.95% failed failed
Download.com failed 45.49% 0% 27.9%
ESPN failed 69.84% failed 27.9%
Average: 18.15% 53.91% 8.67% 24.18%

順位

1. Icey Compressor
2. Clean CSS
3. CSS Optimiser
4. Flumpcakes

重要なポイント

・圧縮率の高さ
・再現性の高さ

整形・圧縮をかけた結果，元の表示と違ってしまうというケースが多いようだ．

Reference

Blogging Pro - 20006-08-17 - CSS Optimization: Make Your Sites Load Faster for Free-
http://www.bloggingpro.com/archives/2006/08/17/css-optimization/

Icey - Projects - CSS Compressor
http://iceyboard.no-ip.org/projects/css_compressor

Clean CSS
http://www.cleancss.com/

Online CSS Optimizer / Optimiser
http://www.cssoptimiser.com/

flumpCakes - Online CSS Optimiser/Optimizer
http://flumpcakes.co.uk/css/optimiser/

CSS Formatter and Optimiser/Optimizer (based on CSSTidy 1.2)
http://www.cdburnerxp.se/cssparse/css_optimiser.php

CSS Tweak
http://www.cssdev.com/csstweak/

Factor CSS
http://zamez.org/factorcss

via

秋元@サイボウズ研究所プログラマーBlog: CSSの圧縮サービス比較記事
http://labs.cybozu.co.jp/blog/akky/archives/2006/08/css_optimization.html

A Handy CSS Debugging Snippet

Posted on | Tagged :

Summary

 * { outline: 2px dotted red }
 * * { outline: 2px dotted green }
 * * * { outline: 2px dotted orange }
 * * * * { outline: 2px dotted blue }
 * * * * * { outline: 1px solid red }
 * * * * * * { outline: 1px solid green }
 * * * * * * * { outline: 1px solid orange }
 * * * * * * * * { outline: 1px solid blue }


Reference

A Handy CSS Debugging Snippet
http://homepage.mac.com/chrispage/iblog/C42511381/E20060806095030/

Clean CSS - CSSの最適化，ファイルサイズ削減ツール

Posted on | Tagged : ,

Summary

テキストフィールドにCSSを入力するか，CSSが置いてあるURLを指定して，"Process CSS" をクリック．
クリックして拡大

使用前 (196byte)

#example {
	color: rgb(0,0,0);
	background-color: #ffffff;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
	padding: 10px 5px 10px 5px;
}


使用後 (Compression: Low)

#example
{
	color:#000;
	background-color:#fff;
	font-weight:700;
	margin:5px;
	padding:10px 5px;
}

入力 196 byte
出力 99 byte
圧縮率 49.5 %
差 - 97 byte

使用後 (Compression: Standard)

#example {
color:#000;
background-color:#fff;
font-weight:700;
margin:5px;
padding:10px 5px;
}

入力 196 byte
出力 94 byte
圧縮率 52.0 %
差 -102 byte

使用後 (Compression: High)

#example{color:#000;background-color:#fff;font-weight:700;margin:5px;padding:10px 5px;}

入力 196 byte
出力 87 byte
圧縮率 55.6 %
差 -109 byte

Reference

Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
http://www.cleancss.com/

きれいな独自フォームの生成方法

Posted on | Tagged : ,

Summary

Niceform[2006-04-18-3]のような独自フォームを生成する方法．

Reference

maratz.com - 2006-06-11 - Fancy checkboxes and radio buttons
http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/

via

phpspot開発日誌 - 2006-06-19 - デフォルトのフォームをクールにカスタマイズする方法
http://phpspot.org/blog/archives/2006/06/post_85.html

CSS だけでタブ UI を実現

Posted on | Tagged :

Summary

CSS3だけでタブを実現．
Behaviour.js を利用している．

Reference

我的春秋 - Tabs using :target pseudo-class in CSS 3
http://my-chunqiu.cocolog-nifty.com/html/test.html

via

我的春秋 - 2006-01-05 - JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/01/javascript_html_bc22.html
我的春秋 - 2006-06-10 - 続 JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/06/_javascript_htm_d49c.html

JavaScriptは使わずCSSだけで作られたイメージギャラリー

Posted on | Tagged :

Reference

stu nicholls | CSS PLaY | cross browser multi page photo gallery
http://www.cssplay.co.uk/menu/lightbox.html#flower8

Suckerfish HoverLightbox | Monday By Noon
http://www.mondaybynoon.com/2006/03/27/suckerfish-hoverlightbox/

via

GIGAZINE - JavaScriptは使わずCSSだけで作られたイメージギャラリー
http://gigazine.net/index.php?/news/comments/20060402_cssonly/