chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

IEの互換表示対策

IEレンダリング

みんな大好きIE。 バージョン毎にレンダリング方法が変わるとてもやっかいなブラウザです。 ChromeSafariFirefoxだとちゃんと表示されているのにIEだけ崩れて表示されていたりすることはよくある事です。 バージョンが古い方がもちろん表示崩れがよく起きたりします。 できるだけ最新のバージョンでの表示をしたいですね。

レンダリングバージョンの標準を最新に

IEレンダリングバージョンを変えることができます。 互換表示ボタンが備わっていてそれを押してしまうと、従来のバージョンで表示できるようレンダリングバージョンを変えてしまいます。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

このmetaタグを設定しておくと、使用しているIEの最新バージョンで常に表示してくれるようになります。 IE10ならIE10。IE8ならIE8。

互換表示ボタンを押してしまって、戻すのを忘れると常に互換表示状態のままになってしまうので、それを避けるのにも有効です。

低速度回線での検証

あけましておめでとうございます。

普段から安定した回線で開発をしたりしていると、つい低速度の回線環境での表示がどのようになっているか見落としがちになってしまいます。 そこでChromeディベロッパーツールのNetworkタブで簡単に回線の調節をする事ができます。

設定変更

さっそくディベロッパーツールを開いて、Networkタブを選択してみましょう。 f:id:chocotaka:20180109231315p:plain

右上にOnlineとなってるセレクターがあるのでそこをクリックすると

f:id:chocotaka:20180109231325p:plain

のように回線の種類が表示されます。 Slow 3Gとあるので試しに選択して、ページをリロードしてみると今までサクサク動いていたページもモッサリになります。

カスタマイズ

さらに一番下にあるAddを選択すると図のように自分で好きなようにカスタマイズが可能なので、検証してみたい速度に設定することが可能です。

f:id:chocotaka:20180109231825p:plain

メタ theme-color

theme-color

GoogleiOS アプリやAndroidChromeでWebサイトにtheme-colorを設定すると、アドレスバーの色を設定することができます。

実装方法

<meta name="theme-color" content="#ffffff">

head内にmetaタグを設定するだけです。contentに設定されたカラーコードの色に変化します。

実用性

これを設定したことによって何かに大きく影響があるというわけではありませんが、少しは他のサイト差別化したりサイトの特色を出したりすることができるのではないでしょうか。

他にlighthouseのスコアには設定していないと突っ込まれたりしているようなので、スコアを気にしている人は設定するのもいいかもしれません。

f:id:chocotaka:20171213221526p:plain

developers.google.com

font-display

webフォントの読み込み

ローカルフォントがあれば読み込みに時間はあまりかかりませんが、webフォントの場合はローカルフォントと比べると読み込みに時間がかかってしまいます。 この影響でページのロードをしてからテキストが表示されるまでの間にユーザを待たせてしまう事があります。 font-displayというCSSプロパティで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの表示をする事ができます。

使用例

@font-face {
  font-family: "sample";
  font-weight: 400;
  font-style: normal;
  src: url("font.ttf") format("ttf");
  font-display: swap;
}
p {
  font-family: "sample", sans-serif;
}

これによってpタグによって表示されるテキストは設定されたwebフォントが読み込まれるまでは一時的に、sans-serifでテキストの表示をされるようになります。

Can I use... Support tables for HTML5, CSS3, etc

chrome ディベロッパーツール 「Coverage」

chromeディベロッパーツールでCoverage機能を知っているでしょうか?? chrome 59 から使えるようになった機能ですので、使いたい場合はバージョンUPをしましょう。

js and css coverage

どのような機能かというと、使用・不使用のcssjsのコードを表示してくれる便利な機能になります。

使い方

f:id:chocotaka:20171128215539p:plain chromeディベロッパーツールを開いて、Coverageタブを開きます。

f:id:chocotaka:20171128220140p:plain レコードボタンを押してトレースを開始します。

f:id:chocotaka:20171128221156p:plain そうすると表示されているページで使用されているコードは、不使用のコードはで色が付いて表示されるようになります。

最後に

不要なコードを見つけることができるのでとても便利です。コードの改善にぜひご活用ください。

picture要素

picture要素とは

HTML5.1で新しく加わった要素の一つで、モバイル/タブレット/パソコンと画面解像度に最適化された画像を設定するのに javascriptcssでごにょごにょする必要があったのを解決する、とても便利な要素です。

使ってみよう

<picture>
  <source media="(min-width: 700px)" srcset="sample1.jpg">
  <source media="(min-width: 300px)" srcset="sample2.jpg">
  <img src="default.jpg">
</picture>

このように、pictureで囲って使用します。

sourcemedia属性にcssのメディアクエリのような書き方で、ディスプレイのサイズの指定が可能です。 img要素はデフォルトの画像を指定します。

ここで気をつけて欲しいのはimg要素は必ず最後に指定することです。

img要素をsource要素より先に指定してしまうと、image要素の後のsourceは無視されてしまいます。

画像解像度を設定できるsrcsetタグ

maclatinaディスプレイのように高解像度の場合、画像サイズが2倍の画像を使うなんてことはよくあることだと思います。 そこでもう一つ便利なのがsrcsetタグです。

<picture>
  <source
    media="(min-width: 768px)"
    srcset="sample.jpg, sample_1.5x.jpg 1.5x, sample_2x.jpg 2x"
  />
</picture>

このように、srcsetタグの画像を指定した後に1.5x 2xと指定する事で、1.5倍のサイズ、2倍のサイズと簡単に対応することができます。

レスポンシブとの相性がとても良いですし、画像の最適化のために活躍する要素です。