表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
Browser-level image lazy loading for the web | Articles | web.dev
You can use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library. Here's a demo of the feature: Lazy-loaded images load as the user scrolls through the page. This page walks through the details of implementing lazy-loading in the browser. Why browser-level lazy loading? According to the HTTP Archive, images are the most-r
Native image lazy-loading for the web!
April 6, 2019 In this post, we’ll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here’s a sneak preview of it in action: <img src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> We are hoping to ship support for loading in ~Chrome 75 and are working on a deep-dive of the feat
安全な文字列であると型で検証する Trusted Types について | blog.jxck.io
Intro 脆弱性の原因となる DOM 操作の代表例として elem.innerHTML や location.href などが既に知られている。 こうした操作対象(sink) に対して、文字列ベースの代入処理を行う際に、一律して検証をかけることができれば、脆弱性の発見や防止に役立つだろう。 そこで処理前の文字列に対し、処理後の文字列を安全であるとして明示的に型付ける TrustedTypes という提案がされている。 まだ未解決の部分が多い提案だが、現時点での仕様と実装を元に、このアイデアについて解説する。 WICG/trusted-types Intent to Experiment: Trusted Types Sink XSS などの原因となる DOM 操作として、 DOM に直接文字列を展開する処理がある。 element.innerHTML location.href scri
simpl.info
This site aims to provide simplest possible examples of HTML, CSS and JavaScript. There are shortcuts for many of these pages (see full list). For example, simpl.info/v redirects to simpl.info/video. A list of web development resources is available from bit.ly/webdevres. Submit bug reports, requests and comments at github.com/samdutton/simpl.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
