【必見】CSSのよくあるミス！新しい機能を使うときは注意しよう

CSSの新しいワザを使ってみたくなる欲求は非常に強いため、時には何が起こっているのかよくわからないまま使ってしまうこともあるでしょう。特に商用のプロジェクトで作業している場合には、新しいCSSクラスやプロパティが実際に何をしているのか、どんな制限があるのかしっかり理解しておくことが重要です。今回はよくあるCSSでのミスや落とし穴について紹介します。

誤用されるプロパティ：font-size-adjust

もしあなたの選んだウェブフォントに問題があり、そのフォールバックのレンダリングが全く異なるx-heightsになっていたら、このプロパティの出番です。しかしCSS3の仕様に含まれているにも関わらず、今のところ利益を受けられるのはFirefoxユーザーのみとなっています。これはおそらくブラウザごとにフォントのレンダリング方法が異なるために、このプロパティの標準的な動作を予測できないことが原因です。

font-size-adjustプロパティは元のフォントサイズを取得し、font-size-adjustの値で割った数字を全てのフォールバックフォントに適用します。最適な値を見つけるには試行錯誤が必要で、使うフォントやブラウザなどに依存します。例を見てみましょう。

この例ではAlagreyaフォントが読み込まれずGeorgiaかブラウザ標準のセリフフォントが表示される場合、2remの半分である1remの大きさが指定されます。

calc()

CSSのcalc()は導入されてしばらく経ち、ほとんどのブラウザでサポートされています。しかし安定しているとは言えず、まだまだ問題を抱えています。次のような状況では特に気をつけるべきでしょう。

• ・IE11において生成されたコンテンツ内では正しくサポートされていません。
• ・IE11において入れ子になった式では問題が発生します。
• ・Firefox 48未満においてline-height、stroke-width、stroke-dashoffset、stroke-dasharrayプロパティではサポートされていません。
• ・EdgeとIEにおいてflex内ではcalcがサポートされていません。
• ・SafariとiOS版Safariにおいてcalc()にビューポートの単位（vw、vhなど）は使用できません。

calc()はよくwidthプロパティとともにレスポンシブな要素を制作するのに使われます。これが最も安全な使い方でしょう。

CSSには新機能がどんどん導入されていますが、その長所や短所はまだはっきりしていないことも多いのです。最新の情報を気にかけ、学び続ける姿勢が求められるでしょう。

※本記事は、You Might Be Tempted to Use These CSS Tricks But Should You?を翻訳・再構成したものです。