IE9以上から使用できたプロパティですが、IE9にも多少バグが潜んでいました。 IE9が本格的にターゲットブラウザから外れたので安心していたら、まだありました。。。 IE11でcalcのアニメーションがない. 暖かくなったらどっか旅行へ行きたい。。。。. css height (5) ... IE10とIE11のフレックスボックスプロパティのサポートはバグがあり、IE9以下はサポートが全くないことに注意することが重要です。 ... 私はちょうど私が持っていたこの問題を解決するcss calc（）を考え出しました。 その他IEバグ IEだけmainタグが認識されない.



いつもはCSSに対するバグなのにHTMLに対するバグです。なぜかmainタグが認識されず挙動が変だったりまします。私の場合、background-colorに色が反映しないという現象が起きました。 解決策

CSS 変数とは、正式には「カスケード変数のための CSS カスタムプロパティ (CSS custom properties for cascading variables)」と定義されています。従来の CSS では、変数は Sass や LESS のような CSS プリプロセッサを使わなければ利用できませんでしたが、多くのブラウザでサポートされたことにより利用可能になりました。ただし、Internet Explorer など一部のブラウザは対応していません。また、Edge はサポートしていますが、バグが多発している報告があるため、クロスブラウザでテストする場合は注意が必要です。もしも非対応ブラウザも含めてサポートする場合、後述する @supports ブロックを使う方法があります。, 今まで CSS は変数が使えなかったため、サイズや色などのプロパティ値をそれぞれのセレクタに直接定義していました。そのため何かを変更するための修正コストが大きく、メンテナンス性が悪い問題点がありました。特にチーム開発など、複数人で CSS をメンテナンスしている場合、CSS 自体が破綻する原因にもなっていました。, CSS 変数は、それらの問題点を改善するための仕様です。最初に CSS 変数にプロパティ値を定義すれば、それぞれのセレクタには変数を設定するだけで値が適用されるようになります。変数を定義、および使用するルールとしては、以下のとおりです。, var() 関数 は変数が未定義であった場合に備えて、第二引数にフォールバック値も設定できます。ただし上記の例のとおり、フォールバック値は省略が可能です。下記の例は、--color-red が未定義である場合、blue にフォールバックされます。, CSS 変数には、CSS と同じようにプロパティ値を設定できるため、単位ありの数値、単位なしの数値、文字列などが設定できます。下記のようにマスターとなる値を定義しておけば、将来的に変更になった場合でも適用しているすべてのセレクタを修正する必要はなく、:root に定義された変数のみ修正すれば良いことになります。, 更に CSS 変数は CSS 変数を使って定義することも可能です。下記の例は、赤色と青色のグラデーションを実現するために CSS 変数を使用しています。, CSS 変数は別の値が設定された場合、要素の子要素は新しい値を継承します。CSS は他のセレクタでも値の変更が可能であり、変更された場合は対象の要素の子要素は新しい値を継承します。これは、CSS 変数のスコープに関係しています。:root で定義された変数はグローバルなスコープになり、他のセレクタで変更された場合は対象の要素の子要素はローカルなスコープになります。, CSS 変数は、Javascript でも getPropertyValue を指定することで変数の値を取得できます。, Javascript から CSS 変数の値を変更するには以下のように設定します。, CSS 変数が非対応ブラウザを含めたクロスブラウザ対応を行う場合、@supports ブロックを使って回避する方法があります。@supports ブロックとは、CSS の機能をサポートしているかどうかを判別するための機能クエリです。以下の例では、非対応ブラウザが @supports ブロックをサポートしているかどうか判別しています。また、var() 関数にフォールバック値を設定しておけば安全性が高まり、レガシーブラウザにも対応できます。以下の例で sectionの要素は、CSS 変数が対応しているモダンブラウザの場合は青色文字になり、非対応のレガシーブラウザでは灰色文字になります。, CSS 変数の仕様は、あくまでも今までの問題の改善であり解決ではない点に注意してください。どのような場合においても、これらの機能に頼りすぎて複雑化すれば CSS 全体が破綻してしまうリスクはなくなっていません。CSS 変数はこれまでのメンテナンスに選択肢が増えただけに過ぎず、どのように CSS を管理していくかが重要になります。, calc() 関数とは、CSS で数学演算を行うことができる関数で、標準的なブラウザはすべてサポートしています。calc() 関数では以下のように異なる単位での四則演算が可能です。, Sass や LESS などの CSS プリプロセッサでも値の計算は行なえますが、calc() 関数とは根本的にことなります。CSS プリプロセッサの計算された値はブラウザに依存しない静的な値であるのに対して、calc() 関数はブラウザ依存の動的な値です。つまり、画面のリサイズによって Viewport が変更されても再計算により追従することができます。もしも CSS プリプロセッサで単位の異なる値を calc() 関数として出力する場合は、以下のようになります。, calc() 関数はサイズ、幅、高さ、角度、時間など、何かしらの単位が必要なプロパティ値に利用できます。ただし、演算子の前後はスペースで区切らなければ有効にならないため注意が必要です。, calc() 関数は、特にレスポンシブデザインにおいて効果を発揮します。例えば、2 カラム構成でサブコンテンツの width は 300px 必要で、残りはメインコンテンツにしたい場合、以下のように指定できます。, CSS 変数と calc() 関数を組み合わせることで、より柔軟な計算ができるようになります。例えば、CSS 変数で定義した値のマイナス値が欲しい場合、以下のような方法になります。, 上記の方法では、CSS 変数で定義されたマイナス値を取得するために calc() 関数で -1 を掛けています。CSS 変数は少し使いにくい点はありますが、calc() 関数を組み合わせることで今まで取得できなかった値を取得できることになります。アイデア次第では CSS 変数と calc() 関数を組み合わせることで、多くのレシピを生み出すことができます。, Can I use... Support tables for HTML5, CSS3, etc.
css（とdhtml）のバグ報告、お待ちしてます。 ※報告の際はOS・ブラウザ名とそのヴァージョンを明記して下さい。 再現条件をつきとめるため、必要に応じてソースを出して下さい。 これは、本格的にダイエット開始かな！ なんて言いつつ、アイスを食べてます(´◉◞⊖◟◉`)b, さて、今回は、日々の業務で見つけたバグ＆注意点を一気に紹介したいと思います！ それでは、レッツスタート！！！, ずっと敬遠していましたが、使ってみると使い勝手がよかった！ 調子に乗って多様していたら思わぬ落とし穴が。。。, モーダルを実装したときに発覚したのですが、どうやら100vhと100%で若干高さが異なるようです。, 100vhだとメニューを含む高さ 、100%だとメニューを含まない高さの指定になってしまうようです。, ご存知の通りvwとはview widthの略です。 名前の通り本来は画面の横幅が基準となるのですが、IE11だけ正規の動きと異なる場合があります。 親要素が画面幅より大きいとき、画面の横幅ではなく親要に依存してしまうようです。 width: 100%;と同じ挙動になってしまうようです。, IE9以上から使用できたプロパティですが、IE9にも多少バグが潜んでいました。 IE9が本格的にターゲットブラウザから外れたので安心していたら、まだありました。。。, calcを使って2カラムのレイアウト実装時に発覚しました。 サイドメニュー閉じるボタンを実装をしたのですが、IE11 のみアニメーションなしでパッと切り替わってしまいました。 調査した所、 IE11にはcalcのアニメーションが用意されていないようでした。 アニメーションが発生する所にcalcは使用できないと知っておくことで、手戻りが少なくなると思います。, edgeでtranslate3dのアニメーションが効かないバグに遭遇しました。 デフォルトポジションからtransform: translate3d(100px, 0 ,0)に動かすアニメーションを実装したのですが、うまくいきません。 対策として、デフォルトポジションでtransform: translate3d(0, 0 ,0)を宣言することでうまく動きました。 言われれば納得するのですが、見逃しがちです。, hover時に写真をズームさせたい時、transform: scale(1.1);を使用して写真を拡大しました。 ほとんどのブラウザで問題ないのですが、IE11、edgeの問題児だけアニメーション中に小刻みに震えるというバグが発生しました。 対策としてなぜか transform: scale(1.1) rotate(.1deg);を指定すると震えが止まりました。 理由は不明です。。。。, background-imageを固定できたりするプロパティです。 使用頻度が高くないので、逆にハマってしまいました。, PCでは基本的に問題ありません。珍しくIE11でもバッチリ動きます。 問題はSPです。。。。 android標準ブラウザはもちろん比較的優等生なiOS Safariも動きません。 対策として、このように対策しました。, 擬似要素をposition: fixed;で画面に固定してしまいます。 このままではずっと表示されてしまうので、z-index: -1;でコンテンツの下に滑りこませています。 非表示にしたいコンテンツではbackground-color: #fff;など背景色を指定すると大人しく消えてくれます。 逆に背景ありで表示させたい場合は、下記のように設定します。, 擬似要素で背景を作り、z-indexさらにマイナスにしてあげると、うまく実装できます。, 今回初めて使ったプロパティ。 主にカードを回転させるようなCSSアニメーションを実装するときに使用します。, よって、カードをめくるようなときにしか使わないこのプロパティが全く役に立ちません。 対策として、他のブラウザではbackface-visibilityを使って実装し、IE11だけ@keyframesで無理やり実装いたしました。, Android4.4の標準ブラウザにて発生いたしました。 親要素の高さを指定し、子要素をheight: 100%;と指定したのですが、height: 0。 なぜか%が効きませんでした。。。 ここは、大人しくjsでUA判定して限定対応いたしました。 ちなみに、vh,vwは問題なく動きます。, これもAndroid4.4の標準ブラウザにて発生いたしました。 webフォント'Noto serif Japanese'を設定をした状態で、明朝系のfont-familyを下記のように設定しました。, font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho,'Noto serif Japanese', serif; 明朝フォントがないAndroid系のみ'Noto serif Japanese'を適用したかったので、あえて'Noto serif Japanese'の優先度を落としました。, Android4.4で見事に'Noto serif Japanese'が当たりませんでした！ というより、明朝系のフォントが丸っと無視されてAndroid特有の可愛らしいゴシック体が当たっていました。, どうやら、ある程度フォントが見つからないとデフォルトのフォントファミリーで表示されてしまうようです。, 対策として、Android系の明朝体には'Noto serif Japanese'のみ宣言しました。, 要素の重なりをコントロールするために使用されるz-indexですが、z-index: 9999;にしても最前面にならないことがあります。 そもそもの親要素同士の優先度ということもあるのですが、見逃しがちなのが、translate3dの存在です。 実は、z-indexよりz軸を直接コントロールできるtranslate3dの方が強い場合もあります。 ほとんどのブラウザではz-indexの方が優勢でしたが、safari系のブラウザではtranslate3dの方が最前面に表示されます。 safariは要注意かと思います。 translate3dはcssアニメーションにはよく用いられるので、真っ先に疑ってみるのもいいかと思います。, autoprefixerが入っているかと思って安心して実装していたら、Android4.4系でtransformが機能しませんでした。 調べてみると、autoprefixerの設定のようです。 デフォルト開発環境の設定では`browsers: [‘last 2 versions’]`となっており、Android4.4は見事に漏れております。 設定ファイルを`browsers: [‘last 2 versions’, ‘Android >= 4.4’]`に変更してあげましょう。, aタグなどでボタンを作成する時、ボタンの高さを`line-height`だけ指定して横着していませんか？ 私はよくやります（笑） IE11では要素によって`line-height`だけでは高さを保持できないので、必ず`height`指定もしましょう！, 「あれ、画面サイズを縮小すると要素が入らない！」 「zoomかければいいんじゃね？」 という会話よく聞きます（？）よね！ 実はzoomはもともとIE独自のプロパティでした。 後追いでChrome,safariも対応してきましたが、規則に忠実なFireFoxには対応しておりません。 タブレット、SPに関しては、ターゲットブラウザからFireFoxが外れることが多いので、許容できますが、PCレイアウトにおいてzoomを使用するのは控えましょう！, ページのメインの要素にとりあえず囲っておくmainタグ。 場合によってmargin: 0 auto;などを付与する時があるかと思います。 他のブラウザでは中央化されるのに、なぜかIEだけ中央化しない！なんてことありますよね？ 実は、mainタグIEではブロック要素と認識されていないようです。 共通のcss等でmain要素にdisplay: block;としてあげましょう！, サイト内に電話番号を仕込む時、「SPでは電話をかけたいけど、PCではかけたくない！」なんて要望も多いかと思います。 最近ではPCの時だけcssでpointer-events: none;を当てればクリックしてもかからなくなるのですが、edgeではとんだお節介機能があります。 電話番号らしき文字列を検出したら勝手に水色になるという問題です。 回避のためにはを設定してあげる必要があります。 haedタグ内でUA判定をして動的に付与してあげましょう。, 電話番号に続いて©︎も水色に変換されます。 問題が発生したのが、Nexus9。 文字実体参照に変更しても治らず、機種依存ということで未対応となっております。 対処方法がわかる方、いらっしゃいましたらご一報ください！. お好みのものを使用してください! CSS.
この3種類は著作権マークがフォントや文字セットで利用できない場合のために作られたものらしく、意味は同じなようです。 サイズもCの感じも微妙に違いますよね? W3C仕様書より, 変数にプロジェクトに関連した分かりやすい名前をつけることにより、コードの管理やメンテナンスがしやすくなります。プロジェクトで原色を編集する場合、CSSカスタムプロパティ--primary-colorの値を変更すればよく、すべての場所のCSSプロパティの値を変更する必要はなくなるのです。, Webサイトのスタイリングで変数の持つ柔軟性を利用する方法は、SassやLessといったプリプロセッサーの活用です。, プリプロセッサーで変数を設定すると、関数やループ、算術演算などで使えます。CSS変数に大きなメリットはないのでしょうか？, そうとは言えません。CSS変数にはプリプロセッサーで変数を設定するとは違った面がいくつかあります。, CSS変数がブラウザーで実行する動的なCSSプロパティなのに対し、プリプロセッサーの変数はCSSコードにコンパイルされるためブラウザーは関与しません。, つまり、スタイルシートドキュメント内のCSS変数は、インラインスタイル属性やSVGのプレゼンテーション属性で変更したり、JavaScriptで選択、操作したりできるのです。可能性が無限に広がります。プリプロセッサーの変数では実現できません。, CSS変数かプロセッサーの変数か、選ぶ必要はありません。CSS変数とプリプロセッサーの変数、両方とも利用しない手はないでしょう。, 分かりやすくするために「CSS変数（CSS variables）」と呼んでいますが、公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」としています。CSSカスタムプロパティ部分のコードは以下の通りです。, カスタムプロパティは冒頭にハイフンを2つ記述し、通常のCSSプロパティと同様に値を設定します。上のスニペットでは、カラー値にカスタムプロパティ--my-cool-backgroundを設定しました。, カスタムプロパティのスコープはCSSセレクタ内です。var()はCSSプロパティの実際の値として使えます。, 上のスニペットで、カスタムプロパティ--my-cool-backgroundのスコープは疑似クラス:rootで、値はグローバルに利用できます（つまり 要素内のすべてに適用できます）。これでID fooをもつコンテナのbackground-colorプロパティにvar()関数で値を適用でき、背景色がライトブルーになります。, さらに、var(--my-cool-background)を使ってカスタムプロパティ値を取得し、CSSプロパティに適用するだけで、ライトブルーのカラー値をcolor、border-colorといった複数のHTML要素のカラープロパティに設定できます。ただし、複雑化しないうちにCSS変数の命名規則を決めることをおすすめします。, 上のスニペットでは変数--my-gradientを作成し、値を変数--top-colorと--bottom-color双方で設定してグラデーションを実現しています。これで変数の値を変更すれば、グラデーションを修正できます。スタイルシート全体からグラデーションインスタンスをすべてピックアップする必要はないのです。, 上のスニペットでは「#333」がフォールバック値です。フォールバック値を記述しないと、カスタムプロパティが無効だったり設定されていなかったりすると、代わりに継承値が適用されます。, たとえば、var(--foo)とvar(--FOO)は別のカスタムプロパティを参照します。, 通常のCSSプロパティと同様、CSS変数は継承されます。カスタムプロパティを定義し、値をblueとします。, ルート要素内で変数--main-colorが適用された要素はすべて値としてblueを継承します。, ほかの要素内でカスタムプロパティに別の値が新しく設定された場合、要素の子要素はすべて新しい値を継承します。以下に例を示します。, 上のマークアップの最初の段落はグローバル変数--main-colorから値を継承し、カラーは青になります。, .alertクラスのdiv内の段落のカラーは、ローカルにスコープ指定された変数--main-colorから値を継承しているため、--main-colorの値の赤になります。, CSS変数とSVGの相性は抜群です。CSS変数を使って、インラインSVG内のスタイルとプレゼンテーション属性の双方を変更できます。, アイコンが配置された親コンテナごとにSVGアイコンのカラーを変更します。変数のスコープを親コンテナに限定し、それぞれに希望の色を設定すると、各コンテナのアイコンは親コンテナの色を継承します。, 上のマークアップではタグで、SVG画像を非表示にします。続いてタグで画像を表示します。この方法では要素のIDを使って（#close-icon）参照するだけで、アイコンを複数作成でき、それぞれカスタマイズできます。画像の数だけコードを繰り返し記述するより便利です。詳しくは、Build Your Own SVG Icons（オリジナルのSVGアイコン作成）が参考になります。, SVGの「symbol」要素の「circle」要素内、strokeプロパティの値と「text」要素内のfillプロパティの値を見てください。どちらもCSS変数--icon-colorが適用されています。このCSS変数はCSSドキュメント内の:rootセレクタで定義しています。, SVGアイコンを複数のコンテナ要素内に配置し、変数を個々の親要素のセレクタ内にローカル化して別のカラー値を設定すると、スタイルルールを追加しなくてもアイコンの色を変えられます。, .successセレクタ内で値にgreenを設定すると変数--icon-colorをローカル化し、結果を確認します。, CSS変数は、通常のHTML要素やインラインSVG要素のCSSアニメーションにも使えます。アニメーションの要素を、ターゲットとするセレクタ内でカスタムプロパティを定義して@keyframesブロック内で関数var()を使ってカスタムプロパティを参照するだけです。, SVG画像内で.bubbleクラスの要素をアニメーションしてみましょう。, CSSのcalc()を使って関数var()と計算しています。コードの柔軟性がさらに向上します。, この場合、CSS変数を使うメリットは、適切なセレクタ内で変数の値を変更するだけでアニメーションを微調整できることです。@keyframesで指定したすべての部分に含まれるプロパティを探し出す必要はないのです。, 値が100px、スコープはCSSドキュメント内の.sidebarクラスのCSS変数--left-posがあるとします。, 上のスニペットでは、サイドバー要素用の変数--left-posの値を200pxに設定しています。, CSS変数でWebページにインタラクティビティを持たせる方が、状況に応じて多くのクラスを切り替えたり、CSSルール全体を繰り返し記述したりするよりずっと簡単でメンテナンス性が向上します。, 次のデモを確認してください。CSS変数とJavaScriptだけでインタラクティブにサイドバーを切り替えたり、blend modeプロパティや背景色を変更したりできます。, 執筆時点で、IE11（非対応）とMicrosoft Edge（対応しているがバグが多発）を除き、主要ブラウザーはCSS変数に対応しています。, 対応していないブラウザーを考慮に入れるなら、ダミー条件クエリで@supportsブロックを使いコードを書く方法があります。, IEやEdgeが@supportsに対応していればこれでOKです。さらに関数var()内のフォールバック値を使えば安全性が高まり、低機能ブラウザーにも柔軟に対応できます。, ChromeをはじめとするCSS変数対応ブラウザーでは、