レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
301リダイレクト出来ず meta refresh を使う場合は link rel=”canonical” 併用が良さそう
301リダイレクト出来ず meta refresh を使う場合は link rel="canonical" 併用が良さそう Webサイトのリニューアルに際してURLが変わる場合、 対ユーザー（旧URLにアクセスした人も問題なく閲覧できるように） 対検索エンジン（サイト・ページの評価、SEO資産を引き継ぐ） 2つの理由から、通常は .htaccess ファイルに301リダイレクトの記述をし、旧URL ⇒ 新URLに転送を行います。。。が。 何らかの理由で、301リダイレクトが行えない場合もあります。 無料ブログ、外部ホームページ作成サービスを利用している場合など、仕様上サーバーに .htaccess を置くことが出来ない、というのがその典型です。 ちょっと困ったケースですが、表題にある通り HTML<link rel="canonical" href="https://new-domain.
`<aside>` 要素のアクセシビリティマッピングが変更
W3C が公開している HTML Accessibility API Mappings 1.0 において、2022年4月4日付で <aside> 要素のアクセシビリティマッピングが変更されました。 Suggest <aside> should map to complementary with restrictions · Issue #86 · w3c/html-aam aside mapping revisions by scottaohara · Pull Request #350 · w3c/html-aam 本記事ではなぜこのような変更が行われたのか、 Web 制作者が注意すべき点を含めて確認してゆきます。 <aside> 要素と対応する role アクセシビリティマッピングの変更 ブラウザ対応状況 <aside> 要素と対応する role § <aside> 要素はセクショニン
HTML の `hidden` 属性が列挙型に変更され `hidden="until-found"` が追加
すべての HTML 要素に指定できる hidden 属性 はこれまで真偽属性 でしたが、このたび列挙型に変更され、新たに until-found が定義されました。 hidden="": Hidden 状態 hidden="hidden": Hidden 状態 hidden="until-found": Until found 状態 ← New! 2022年3月24日現在、 Chrome 102 (canary) は hidden="until-found" に対応しており、本記事で例示する挙動を確認できます。 これは以下の issue で提案されていたものです。 Proposal: beforematch event and hidden=until-found attribute · Issue #6040 · whatwg/html 例えばこんな HTML の場合。 <section
Web Components and SEO
We all understand how important SEO is and how crucial it is for crawlers to be able to understand our content in our sites and apps. I work at Red Hat on the Customer Portal, our support and documentation site, and over the last 90 days, 72% of our referred traffic has come from search engines. That’s a big number. So our technology choices on how we deliver content to our users really matters. W
Optimizing Video For Size And Quality — Smashing Magazine
Adding video to your application can increase customer engagement and satisfaction. But the exact opposite can occur when there are issues with the video playback: video stalls are frustrating and drive customers away. In this article, we’ll walk through the steps to optimize the video on your website to ensure fast playback and reduce stalls. Over the last few years, more and more projects are us
Semantics (セマンティクス) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
プログラミングでは、セマンティクスとは、コードの断片の意味を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか？」、「その HTML 要素には、どのような目的や役割があるのか？」 (「どのように見えるのか？」ではなく)。 JavaScript において、文字列の引数を取り、その文字列を textContent とする <li> 要素を返す関数を想像してみてください。 build('Peach') または createLiWithContent('Peach') という関数名の場合、何をするのかを理解するためにコードを見る必要があるのはどちらでしょうか？
HTML Standard 日本語訳
5 Microdata5.1 導入5.1.1 概要5.1.2 基本構文5.1.3 型付きアイテム5.1.4 アイテムのためのグローバル識別子5.1.5 語彙を定義するときに名前を選択する5.2 microdataをエンコーディングする5.2.1 microdataモデル5.2.2 アイテム5.2.3 名前：itemprop属性5.2.4 値5.2.5 Associating names with items5.2.6 Microdataと他の名前空間5.3 サンプルmicrodata語彙5.3.1 vCard5.3.1.1 Conversion to vCard5.3.1.2 例5.3.2 vEvent5.3.2.1 Conversion to iCalendar5.3.2.2 例5.3.3 ライセンス作品5.3.3.1 例5.4 Converting HTML to other form
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
メルカリエンジニアリング
「Mercari Engineering」は メルカリのエンジニアに関する情報を、 オープンに公開・共有していくためのサイトです。
The Front-End Tooling Survey 2019 - Results
Front-end development Blog and Portfolio for Ashley Watson-Nolan – Senior UI Engineer at Just Eat It's been a little while coming, but the results from the 2019 Front-End Tooling Survey are now here! This year, 3,005 developers answered 27 questions covering a wide range of front-end tools and methodologies. As always, a massive thank you from me to every single person that took the time to fill i
🚀electron-builderで自動アップデートに対応
前回の記事「electron-builderを使ってvueアプリケーションのパッケージを作成」の続きです。前回はvue+electronとしての構築方法でしたが今回は コード著名(Mac)AutoUpdate指定Publish指定 の解説です。electron単体の自動アップデートの設定として独立している記事になっています。 はじめに、electron-packagerの頃はMac用の自動アップデート対応にはパッケージ配布用のサーバーが必要でした。パッケージを置く用途+バージョン情報から最新のパッケージ情報をjsonで返却するサーバーが。 そのため最善手としてはLambdaを使用してs3のダウンロードURLを返却する設定が必要だったのですが、electron-builder(正確にはelectron-updaterの機能)ならそれは不要になります。ビルド時に作成されるymlファイルを読み取
Lazy load embedded YouTube videos
I was working on this simple static website that should have an YouTube video displayed right on the landing page. So I went my merry way, hopped onto YouTube, snatched the embed code, pasted it into my editor and called it a day. The thing is the job was specifically to deliver high performance, accessibility and modern practices, so you can imagine my annoyance when I noticed that just for havin
Using rel="preconnect" to establish network connections early and increase performance | CSS-Tricks
Using rel=”preconnect” to establish network connections early and increase performance Milica Mihajlija: Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you’d like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser r
ZOZO Technologies TECH BLOG
2020-04-10 iOS 13から追加されたフルページのスクリーンショットの機能と対応方法の紹介 iOS こんにちは！ ZOZOTOWN部の遠藤です。 iOS 13がリリースされて半年が経ちましたね。iOS 13といえばダークモード機能が注目を浴びましたが、それ以外にもたくさんの新しい機能が追加されました。 本記事では新しく追加されたフルページのスクリーンショットに… iOS 13から追加されたフルページのスクリーンショットの機能と対応方法の紹介 2020-03-13 技術書典 応援祭にて「ZOZO TECH BOOK VOL.1」頒布中 #技術書典 お知らせ こんにちは、ZOZOテクノロジーズ CTO室の池田（@ikenyal）です。 ZOZOテクノロジーズでは、現在開催中の技術書典 応援祭にて、有志で制作した技術同人誌【ZOZO TECH BOOK VOL.1】の頒布を開始しました
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Markuplint - すべてのマークアップ開発者のためのHTMLリンター | Markuplint
5 Tips To Make Google Fonts Faster
Using Web Components in WordPress is Easier Than You Think | CSS-Tricks
画像の最適化 | Web | Google Developers
