[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
Chromeの自動フォントサイズ調整機能 – NonTitle
ChromeでCSSのfont-size:9px以下が有効にならないのをご存知でしょうか。僕はお恥ずかしながら最近知りました。Chromeにはユーザーがテキストを読みやすいように自動で小さすぎる文字を大きくする機能を備えています。個人的にはそんなもん実装するなよって思いますが、ユーザビリティ的には正解なんでしょうかね。 ですが、Chromeのそのありがたいのかどうかわからない自動フォントサイズ調整機能をCSSで強制的に無効にする方法があります。下記のプロパティで「none」を設定するだけです。個人的にはCSSで無効にされるようなものなら実装すんなよってまたまた思っちゃいます。全体に設定したいのであれば「body」に記述すればいいですし、特定の箇所だけに設定したければ「id」や[class]に記述してください。 -webkit-text-size-adjust:none; これで問題（？）は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
