CSS3の先行実装をまとめてみた(たぶんコーディング・レンダリング例付き)
直近のCSS3の草案等で規定されているプロパティなんかをまとめてみました。
基本的にはURLの羅列です。原則として
の順に並べています。ただ、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
CSS3 ruby
- 4.1 Ruby positioning[]
- [] the 'ruby-position' property:http://www.w3.org/TR/2003/CR-css3-ruby-20030514/#rubypos
- ruby-position−スタイルシートリファレンス
- http://www.htmq.com/style/ruby-position.shtml
- IE,ruby-position
- http://msdn.microsoft.com/en-us/library/ms531152%28VS%2e85%29.aspx
- 4.2 Ruby alignment[]
- [] the 'ruby-align' property:http://www.w3.org/TR/2003/CR-css3-ruby-20030514/#rubyalign
- ruby-align−スタイルシートリファレンス
- http://www.htmq.com/style/ruby-align.shtml
- IE,ruby-align
- http://msdn.microsoft.com/en-us/library/ms531150%28VS%2e85%29.aspx
- 4.3 Ruby overhanging[]
- [] the 'ruby-overhang' property:http://www.w3.org/TR/2003/CR-css3-ruby-20030514/#rubyover
- ruby-overhang−スタイルシートリファレンス
- http://www.htmq.com/style/ruby-overhang.shtml
- IE,ruby-overhang
- http://msdn.microsoft.com/en-us/library/ms531151%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/
- SafariのCSS 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で追加された背景に関するプロパティ:FirefoxとSafariのCSS対応
- 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):FirefoxとSafariのCSS
- 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 Basic box model
- 11.1. The ‘overflow’, ‘overflow-x’ and ‘overflow-y’ properties
- http://www.w3.org/TR/2007/WD-css3-box-20070809/#overflow
- Overflow-x/overflow-y
- http://www.css3.info/overflow-xoverflow-y/
- overflow-x, overflow-y tests
- http://www.brunildo.org/test/Overflowxy2.html
- IE,overflow-x/overflow-y
- http://msdn.microsoft.com/en-us/library/ms530826%28VS%2e85%29.aspx
- Firefox,overflow-x/overflow-y - CSS Reference[]
- []Mozilla Extensions:http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions
- Opera,overflow-x/overflow-y
- http://www.opera.com/docs/changelogs/windows/950/
- Safari,overflow-x/overflow-y
- http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-overflow-x
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
CSS Advanced Layout Module
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
- サポート(どれをサポートしてるかは未確認)
CSS3 color
- 3.2. Transparency[]
- [] the 'opacity' property:http://www.w3.org/TR/2003/CR-css3-color-20030514/#transparency
- Opacity - CSS3.info
- http://www.css3.info/preview/opacity/
- アルファチャンネルとopacityの違い:FirefoxとSafariのCSS対応
- http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20367886,00.htm
- Opacity example
- http://devfiles.myopera.com/articles/418/HSLcolour.html
- CSS opacity, rgba colors, semi-transparent backgrounds
- http://www.brunildo.org/test/semitransp.html
- IE,opacity(alpha filter)
- http://msdn.microsoft.com/en-us/library/ms532910%28VS%2e85%29.aspx
- Firefox,opacity/-moz-opacity(alias)
- http://developer.mozilla.org/en/docs/CSS:opacity
- Opera,opacity
- http://jp.opera.com/docs/specs/opera9/css/#opacity
- Safari,opacity
- http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-opacity
- 4.2. Numerical color values
- http://www.w3.org/TR/2003/CR-css3-color-20030514/#numerical
- RGBA Colors - CSS3.info
- http://www.css3.info/preview/rgba/
- HSL Colors - CSS3.info
- http://www.css3.info/preview/hsl/
- HSLA Colors - CSS3.info
- http://www.css3.info/preview/hsla/
- Firefox,
- http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions
- 4.4. 'currentColor' color keyword
- http://www.w3.org/TR/css3-color/#currentcolor
- Opera,Added support for the CSS3 currentColor color keyword
- http://www.opera.com/docs/changelogs/windows/950/
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で横幅の算出方法を指定する--FirefoxとSafariのCSS対応
- 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
Web font
- 2.1. Font Descriptions and @font-face
- http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/#font-descriptions
- Webkit has web fonts support
- http://www.css3.info/webkit-has-web-fonts-support/
- Safari 3.1でWebフォントを利用する--SafariのCSS対応
- http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20370308,00.htm
- Safari 3.1でWebフォントを利用する--様々な字体を定義する
- http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20370746,00.htm
- Safari,Downloadable Fonts
- http://webkit.org/blog/124/downloadable-fonts/