CSSグラデーションの構文変更とベンダー接頭辞 | Web標準Blog | ミツエーリンクス
前回のベンダー接頭辞に関するエントリで、接頭辞なしの機能を併記してもうまくいかないことがあると書きました。 これは、標準化された（接頭辞のない）機能の構文もしくは解釈が変わってしまう場合を意図しています。そして、CSSのグラデーションでそうした変更が加えられています。 linear-gradient()のキーワードが変更に 少し前の話になりますが、9月8日に更新されたCSS3 Image Values草案では、linear-gradient()の構文で利用されるキーワードの書式が変更されています。 これまでの構文 linear-gradient( [deg | to side-or-corner] , color-stops) これまで、キーワードは、topなら下向きのグラデーション、rightは左向きのグラデーションなど、グラデーションの基点を示していました。 しかし、7月12日版の草案
IE8のモードスイッチ | Web標準Blog | ミツエーリンクス
IEBlogの“IE8 Beta 2 Coming in August”という記事にて、IE8 Beta 2が8月にリリースされるというアナウンスがありました。Beta 2ではCSS 2.1準拠に向けたバグ修正や、スクリプトのパフォーマンス向上が見込まれるようです。また、日本語を含む各言語版のBetaも配布されます。 さて、同じ記事にて「meta要素によるレンダリングモード指定の文書を公開しました。」という報告がありました。今回はこの“Defining Document Compatibility”という文書を参考に、改めてIE8のレンダリングモードについて解説したいと思います。 3つのレンダリングモード IE8には3つのレンダリングモードが存在します。 IE8モード CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。 IE7モード IE7の標準準拠モードと同
CSS3のbackground-positionでより柔軟な配置を | Web標準Blog | ミツエーリンクス
CSS3の新機能といえば、border-radiusやtransform, border-imageなど、新しいプロパティを想像してしまいがちですが、新しい機能は必ずしも新しいプロパティでのみ実装されるわけではありません。CSS3 Colorで追加されたrgba()など、値を拡張して実現する新機能もいくつか存在しています。 こういった拡張は既存プロパティの値として使われるため、ソースを見てもあまり目新しくありません。目立ちにくいのです。そんな目立ちにくい拡張のひとつに、background-positionがあります。 CSS2までは、background-positionに2つの値が指定されても、その基点は「上から、左から」でしかありませんでした。表現によっては「右から○○px、下から○○pxの位置」といった指定のほうが都合の良い場合もありますから、それが出来ないことを面倒と考えていた方
ベンダー接頭辞は使ってもよいか | Web標準Blog | ミツエーリンクス
ベンダー接頭辞つきのプロパティについて、質問をいただきました。 最近ではCSS3を使用したデザインパターンが数多く紹介されています。ボタン要素など簡単なものであれば、画像を用意する事なく表現が出来ると思います。 しかしソースレベルでは(-webkit-)(-moz-)などの接頭辞をつけないとブラウザがうまく処理を行えない現状としては、接頭辞がついたものを業務レベルで実装するべきではないのでしょうか？ ※一般的に接頭辞を使用している要素などは納品データ内にあるべきでないのでしょうか？ 使うべきでない、あるべきでないとは思いませんが、利用には細心の注意をはらう必要があるでしょう。 使える？避けるべき？ まず、CSS仕様には、ベンダー接頭辞の利用は避けるべき（Authors should avoid vendor-specific extensions）と書かれています。仕様が安定して接頭辞を外
CSSの実装状況を知るには？ | Web標準Blog | ミツエーリンクス
当BlogではHTML5やCSS3などの策定状況をお伝えしていますが、実装状況についてはあまり触れていませんでした。というわけで、今回は実装状況を調べるためのリソースを取り上げてみようと思います。 Firefox Firefoxについては、開発者のDavid Baronが、CSS WGのメーリングリストに“CSS implementation status reports (and a first one from Mozilla)”というメールを投稿しています。Firefox 3.5とその次のバージョンについて、実装している機能と実装されていない機能がまとめられています。 Davidは「実装状況や今後のプランなどを共有して、より相互運用性を高めよう」という考えのもとこの企画をはじめたようで、メールでは今後実装を考えているモジュールについても触れられています。 Firefoxは他にも、Mo
Progressive Enhancementの実践と普及にむけて | Web標準Blog | ミツエーリンクス
前回は実装におけるGraceful DegradationとProgressice Enhancementの違いについて説明しました。もうひとつ、Progressive Enhancementな例をお見せして、このシリーズを終わらせたいと思います。 Flashの埋め込みもProgressive Enhancementなやり方で Flashの埋め込みについても、JavaScriptを用いた方法が盛んに行われているように思います。しかし、このやり方ではスクリプトが無効な環境でFlashが表示されません。また代替内容があったとしても「Flashプレーヤーが必要です」というメッセージがでるものが多く、適切な使われ方がされていないように思います。 動きを与えるムービーや動画など、代替となるコンテンツがそもそも存在し得ないものであれば仕方が無いかもしれません。しかし、サイトのナビゲーションがFlash
Graceful DegradationとProgressive Enhancementの実践 | Web標準Blog | ミツエーリンクス
Chris Heilmanによる“Graceful degradation versus progressive enhancement”という記事について、前回は概要とその意義について紹介しました。今回は後半にあるの例をもとに、どのように実践していくのかを考えてみたいと思います。 「印刷する」というリンク オンラインショッピングの決済画面には、印刷して手元に保管したいというニーズがあるからか「印刷する」といったリンクやボタンが設けられています。クリックしたときに印刷用ページが現れるものもありますが、記事では印刷ダイアログが現れる簡単なものを取り上げています。 このようなリンクは、JavaScriptにより実現されています。 <p id="printthis"> <a href="javascript:windowprint()">Print this page</a> </p> しかしな
HTML5 における HTML4 からの変更点
この文書は「HTML5 differences from HTML4 (W3C Working Draft 25 May 2011)」の日本語訳です。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。 この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照してください。 更新日: 2011-09-15 公開日: 2011-05-26 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> HTML5 における HTML4 からの変更点 2011年5月25日付 W3C 草案 (Working Draft) この版: http://www.w3.org/TR/2011/WD-html5-diff-2011
英国政府のブラウザガイドラインにみる良識の普及 | Web標準Blog | ミツエーリンクス
2009年1月19日 Bruce Lawson著 （この記事はWeb Standards Project（WaSP）における投稿記事「UK government browser guidelines: good sense prevails」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。） 昨年の9月、私が英国政府のブラウザガイダンスのドラフトに関する記事（訳注：同記事の日本語訳は当Blogでは公開しておりません）を投稿したのを覚えておいででしょうか？そのなかで、ブラウザテストのガイドラインの要点を記したドラフト文書を紹介しました。 政府系Webサイトについて、Webマスターはそれほど人気のない（サイト利用統計で2％に満たない）ブラウザでテストする必要はないこと、テストに用いたブラウザを列記のうえ「お使いのブラウザのバージョンを可能な限り
コミュニティベースなCSSリソースのまとめ | Web標準Blog | ミツエーリンクス
2008年2月4日 Rachel Andrew著 （この記事はWeb Standards Project（WaSP）における投稿記事「Community CSS resources roundup」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。） しばらくの間ベータ版だったのですが、Sitepointは先週、新たにCSS Referenceを自身のサイト上に無料のコミュニティ向けリソースとして公開しました。 作者のTommy OlssonとPaul O'Brienは、信じられないくらい細かく完璧なCSSのリファレンスを作り上げました。単にさまざまなプロパティや文法を例と共に示すのではなく、ガイドラインを通じブラウザの互換性にまつわる問題点を詳述、ベストプラクティスをも与えてくれます。これには膨大な量の作業が注ぎ込まれてきました。そしてまた
IE8の新しい標準モードとモードスイッチ | Web標準Blog | ミツエーリンクス
先月、MicrosoftのIE Teamが発表したIE8がAcid2テストに合格するという話題は、大きな衝撃を与えました。 しかし発表からしばらくして、より標準準拠に近づいたレンダリングをIE8で行うには、DOCTYPEスイッチのようにHTML文書に何らかの「ヒント」を与える必要があるとの情報も流れていました（「IE8 passes Acid2」）。そして先ほど、その詳細とまた経緯が明らかになりました。 A List Apartの「Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8」という記事によると、新しい「ヒント」は次のようなものになると紹介されています。 meta要素を記述し、対象としているIEのバージョンを指定する。 <meta http-equiv="X-UA-Compatible" content="IE=
全称セレクタを用いたスタイルの正規化 | Web標準Blog | ミツエーリンクス
スタイルの正規化にまつわるご質問をいただきました。 アスタリスクで全要素のマージンをゼロにするようなリセットの仕方は海外では行われず、使用する要素だけにマージンをゼロを指定していくという仕方が最近の流れだとセミナーで聴きました。 そのほうがブラウザに対する負荷も少ないので・・・ということなのですが、一体どの程度の負荷なんでしょうか？体感的に重いなと感じる程度なんでしょうか？ ブラウザが読み込んだら固まってしまう状態を100としたらどの程度なんでしょうか？ ページ全体をdiv要素で囲んで、その中の全要素（div * { margin: 0; }）と指定したら、その中で使ってる要素だけなので、あまり気にすることではないような気がします。 まず補足しておきますと、個々のブラウザが適用するデフォルトスタイルシートによって生じる差異をあらかじめ解消するため、制作者スタイルシート側で要素のマージンやパ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
