血統の森+はてな

旧はてなダイアリーの自動インポートによるアーカイブです。

CSS3の先行実装をまとめてみた(たぶんコーディング・レンダリング例付き)

直近のCSS3の草案等で規定されているプロパティなんかをまとめてみました。
基本的にはURLの羅列です。原則として

  • W3Cの仕様書(1つ)
  • 実装例(1つ以上)
  • ブラウザーベンダーのドキュメント(1つ以上)

の順に並べています。ただ、URLの羅列になってしまったという意味でも、参照先ドキュメントが微妙に統一されていないという意味でも、ちゃんとまとめられているのかというとかなり怪しいですが。

CSS3 marquee

11.3. The marquee properties(CSS basic box model)
http://www.w3.org/TR/2007/WD-css3-box-20070809/#marquee
CSS3 marquee - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋
http://momdo.s35.xrea.com/web-html-test/CSS3-memo/marquee.html

CSS3 Namespace

6.1.1. Type selectors and namespaces
http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#typenmsp
Opera 9 の CSS サポート
http://jp.opera.com/docs/specs/opera9/css/

CSS3 text

4.1. Line Breaking Restrictions[]
[] the 'word-break' property:http://www.w3.org/TR/2007/WD-css3-text-20070306/#word-break
word-break−スタイルシートリファレンス
http://www.htmq.com/style/word-break.shtml
IE,word-break
http://msdn.microsoft.com/en-us/library/ms531184%28VS%2e85%29.aspx
safari,word-break
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-word-break
5.1. Text Wrap Settings[]
[] the 'text-wrap' property:http://www.w3.org/TR/2007/WD-css3-text-20070306/#word-wrap
word-wrap - CSS3.info
http://www.css3.info/preview/word-wrap/
text-justify−スタイルシートリファレンス
http://www.htmq.com/style/word-wrap.shtml
IE,word-wrap
http://msdn.microsoft.com/en-us/library/ms531186%28VS%2e85%29.aspx
Safari,word-wrap
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-word-wrap
6.2. Last Line Alignment[]
[] the 'text-align-last' property:http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-align-last
IE,text-align-last
http://msdn.microsoft.com/en-us/library/ms531163%28VS%2e85%29.aspx
6.3. Justification Method[]
[] the 'text-justify' property:http://www.w3.org/TR/2007/WD-css3-text-20070306/#text-justify
text-justify−スタイルシートリファレンス
http://www.htmq.com/style/text-justify.shtml
IE,text-justify
http://msdn.microsoft.com/en-us/library/ms531172%28VS%2e85%29.aspx

CSS3 text-layout

2.8 Text flow short cut[]
[] the ‘writing-mode’ property:http://dev.w3.org/csswg/css3-text-layout/#writing-mode
writing-mode−スタイルシートリファレンス
http://www.htmq.com/style/writing-mode.shtml
IE,writing-mode
http://msdn.microsoft.com/en-us/library/ms531187%28VS%2e85%29.aspx

CSS Backgrounds and Borders Level 3

5. The 'background-image' property
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image
Multiple backgrounds with CSS3
http://www.css3.info/preview/multiple-backgrounds/
SafariCSS 3対応--1つの要素に複数の背景画像を表示する
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20369537,00.htm
Safari,background-image
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-background-size
9. The 'background-clip' property
http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-clip
10. The 'background-origin' property
http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-origin
CSS3[]
[] background-origin and background-clip:http://www.css3.info/preview/background-origin-and-background-clip/
CSS 3で追加された背景に関するプロパティ:FirefoxSafariCSS対応
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20368353,00.htm
Firefox,-moz-background-clip
http://developer.mozilla.org/en/docs/CSS:-moz-background-clip
Firefox,-moz-background-origin
http://developer.mozilla.org/en/docs/CSS:-moz-background-origin
Safari,-webkit-background-clip
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-background-clip
Safari,-webkit-background-origin
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-background-origin
11. The 'background-size' property
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-size
Background-size
http://www.css3.info/preview/background-size/
Opera,-o-background-size
http://www.opera.com/docs/changelogs/windows/950/
Safari,-webkit-background-size
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-background-size
12. The 'background-break' property
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-break
-moz-background-inline-policy []
CSS Examples :[] Mozilla Developer Center:http://developer.mozilla.org/samples/cssref/moz-background-inline-policy-example.html
Firefox,-moz-background-inline-policy
http://developer.mozilla.org/en/docs/CSS:-moz-background-inline-policy
15. The 'border-color' properties
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-color
How to create colored borders with CSS3 - CSS3.info
http://www.css3.info/preview/colored-border/
Firefox,-moz-border-bottom-colors - MDC
http://developer.mozilla.org/en/docs/CSS:-moz-border-bottom-colors
18. The 'border-image' property
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image
Border-image[]
[] using images for your border:http://www.css3.info/preview/border-image/
1枚の画像からサイズ可変な罫線を表示する(1):FirefoxSafariCSS
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20365788,00.htm
Safari,-webkit-border-image
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-border-image
19. The 'border-radius' properties
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius
Border-radius[]
[] create rounded corners with CSS!:http://www.css3.info/preview/rounded-border/
Firefox,-moz-border-radius
http://developer.mozilla.org/en/docs/CSS:-moz-border-radius
Safari,-webkit-border-radius
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-border-radius
22. The 'box-shadow' property
http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-box-shadow
Box-shadow, one of CSS3’s best new features
http://www.css3.info/preview/box-shadow/
ボックスにドロップシャドウの効果をつける--Safari 3のCSS対応
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20372207,00.htm
Safari,-webkit-box-shadow
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-box-shadow

CSS3 Multi-column layout

CSS3 module[]
[] Multi-column layout:http://www.w3.org/TR/2007/WD-css3-multicol-20070606/
Multi-column layout
http://www.css3.info/preview/multi-column-layout/
Firefox,CSS3 Columns - MDC
http://developer.mozilla.org/en/docs/CSS3_Columns
  • -moz-column-count
  • -moz-column-gap
  • -moz-column-width
Safari,-webkit-column-break-after
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-column-break-after

CSS3 Media Queries

5. Media features
http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606/#media1
Media Queries
http://www.css3.info/preview/media-queries/
Opera 9 の CSS サポート
http://jp.opera.com/docs/specs/opera9/css/
Safari
サポート(どれをサポートしてるかは未確認)

CSS Basic User Interface

4.1. The 'appearance' property
http://www.w3.org/TR/2003/WD-css3-ui-20030703/#appearance
Firefox,-moz-appearance
http://developer.mozilla.org/en/docs/CSS:-moz-appearance
Safari,-webkit-appearance
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_appearance
4.1.6. []
read-only and :[]read-write:http://www.w3.org/TR/2003/WD-css3-ui-20030703/#pseudo-ro-rw
フォームのインタフェースデザイン(2)
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20374725,00.htm
Firefox,CSSメモ[]
[] Mozilla拡張(なぜかMDCにない):http://www1.ttcn.ne.jp/amotohiko/css/moz.html
Opera,
(ソース不明)
7.1. 'box-sizing' property
http://www.w3.org/TR/2004/CR-css3-ui-20040511/#box-sizing
Box-sizing, box-model fixes for the simple people
http://www.css3.info/preview/box-sizing/
box-sizingで横幅の算出方法を指定する--FirefoxSafariCSS対応
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20371390,00.htm
IE,-ms-box-sizing
http://msdn.microsoft.com/en-us/library/cc196965%28VS%2e85%29.aspx
Firefox,-moz-box-sizing
http://developer.mozilla.org/en/docs/CSS:-moz-box-sizing
Opera,box-sizing
http://jp.opera.com/docs/specs/opera9/css/#box-sizing
Safari,-webkit-box-sizing
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-box-sizing
8.5. 'outline-offset' property
http://www.w3.org/TR/2004/CR-css3-ui-20040511/#outline-offset
Outline
http://www.css3.info/preview/outline/
CSS3 outline-offset property (demos)
http://tc.labs.opera.com/css/ui/outline/
Firefox,-moz-outline-offset
http://developer.mozilla.org/en/docs/CSS:-moz-outline-offset
Opera,outline-offset
http://www.opera.com/docs/changelogs/windows/950/
Safari,outline-offset
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-outline-offset
9.1. 'resize' property
http://www.w3.org/TR/2004/CR-css3-ui-20040511/#resize
The resize property in CSS3
http://www.css3.info/preview/resize/
Safari,resize
http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-resize
10.1. 'cursor' property
http://www.w3.org/TR/2004/CR-css3-ui-20040511/#cursor
Firefox 1.5でのCSSスタイル指定向上
http://deegg.main.jp/ref/mozilla/naro/2005gecko_innovation.html#cursor
10.2. Keyboard control
http://www.w3.org/TR/2004/CR-css3-ui-20040511/#keyboard
focus navigation
http://www.css3.info/preview/focus-navigation/
Opera,nav-index, nav-up, nav-down, nav-left and nav-right
http://dev.opera.com/articles/view/opera-9-5-the-next-generation-of-web-s/#css3

CSS3 Lists Module

4. List Content[]
[] The 'list-style-type' property:http://www.w3.org/TR/2002/WD-css3-lists-20021107/#list-style-type
CSS3 list - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋
http://momdo.s35.xrea.com/web-html-test/CSS3-memo/list.html