タグ

CSS3と*web制作に関するSyamoRokkuのブックマーク (6)

  • Internet Explorer 8では使えないCSS

    Internet Explorer 8では、ひらたくいうとCSS3から使えるようになったもの全般が効かないのですが プログレッシブ・エンハンスメント対応の場合切り捨てられる装飾 そして 対応してなかったのをうっかり忘れがちな便利要素 を中心にピックアップしてみました。 便利な装飾プロパティ 角丸のborder-radiusが使えない 色と不透明度を同時に指定できるrgbaが使えない 影をつけるbox-shadowとtext-shadowが使えない レスポンシブデザイン対応 media max-width min-width が使えない 疑似クラス :last-child が使えない :nth-child() が使えない 擬似要素 擬似要素を::after(または::before)の書式で書けない 擬似要素にz-indexがきかない 擬似要素にfilterがきかない 便利な装飾プロパティ 角

    Internet Explorer 8では使えないCSS
  • 保存版!CSS3セレクタの説明書

    CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ

    保存版!CSS3セレクタの説明書
  • http://ideahacker.net/2015/02/14/9779/

    http://ideahacker.net/2015/02/14/9779/
  • Autoprefixerによる、CSS3の管理 - kojika17

    CSS3を使用する時に、ベンダープレフィックスを付けていますか? 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle

    Autoprefixerによる、CSS3の管理 - kojika17
  • css-lecture.com

  • text-overflowはFirefox7から使える/複数行の時はJavaScriptで対応 - with the flow

    まんまです。使えるようになってるのを最近知りました。 text-overflowはIEが6から独自仕様として実装していたものですが、 Microsoftの珍しく素晴らしい先見性によって、CSS3の仕様にも組み込まれたものです。今までもwebkit,Operaでは使えていました。 それが、Firefox7からようやく実装されたということですね。 以下のクラスを作っておいて、横幅の指定された対象要素のクラスに追加してあげれば良いです。 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; } はてなCSSが使えるようなので、以下実際にやってみますね。 わかりやすいようにボーダ

    text-overflowはFirefox7から使える/複数行の時はJavaScriptで対応 - with the flow
  • 1