HTML <img> 画像埋め込み要素 - HTML | MDN
上記の例では、 <img> 要素の使い方を示しています。 src 属性は、埋め込みたい画像へのパスを保持します。srcset 属性が利用できる場合、src 属性は必須ではありません。ただし、src 属性または srcset 属性の少なくとも一方は指定しなければなりません。 alt 属性は、この画像のテキストによる代替情報を保持します。これは必須であり、アクセシビリティに非常に役立つものです。スクリーンリーダーは、この属性値をユーザーに読み上げるので、画像の意味が分かります。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストが表示されます。 他にも、様々な目的で指定できる属性がたくさんあります。 セキュリティとプライバシーのためのリファラー/CORS 制御。 crossorigin および referrerpolicy を参照してく
Default styles for h1 elements are changing
Browsers are starting to roll out changes in default UA styles for nested section headings. Developers should check that their sites don't rely on UA styles for certain cases to avoid unexpected results and failing Lighthouse checks. In this post, we'll have a look at what the incoming changes are, how to identify if it's an issue on your pages, and some hints for conformant and better-structured
blocking=render: Why would you do that?! – CSS Wizardry
14 August, 2024 blocking=render: Why would you do that?! Written by Harry Roberts on CSS Wizardry. Table of Contents Independent writing is brought to you via my wonderful Supporters. What is blocking=render? Blocking Status Blocking Files async, defer, and type=module Blocking Web Fonts A/B Testing and Experimentation tl;dr WebKit have recently announced their intent to implement the blocking=ren
仕様と実装から読み解くHTMLのloading属性 - dwango on GitHub
こんにちは。ニコニコQセクションのHajime-san(GitHub)です。 本稿では、HTMLのloading属性の仕様とブラウザの実装を解いていきます。これにより、ブラウザからのコンテンツ配信の最適化を支える判断材料の1つとなれば幸いです。 執筆の動機 筆者が開発に携わっているサービスであるニコニコオーディションが間接的に利用している社内ファミリーサービスについて、ふと自分のスマートフォンで見てみたところページの初期表示に時間がかかるように感じました。 オーディションシステムはiframe要素によって社内ファミリーサービスなどに専用のUIを埋め込むことが可能になっており、iframe要素のloading属性を用いた「遅延読み込み」（以下、遅延読み込みはloading属性によるもの）が効果的なのではないかと考えました。 まずは、実際にloading="lazy"を適用して読み込みが後回し
The 2022 Web Almanac
Web Almanac HTTP Archive’s annual state of the web report Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. The 2022 edition is comprised of 23 chapters spanning aspects of page content, user experience, publishing, and distri
Non-interactive Elements with the inert attribute
Elements are interactive in multiple ways; they can be focused, clicked, edited or selected. Assistive technologies such as screen readers also interact with them. What if you wanted to disable all these interactions for a section of your webpage? The inert attribute covers this. Pre-existing Solutions The most basic way to disable all interactions is the disabled HTML attribute, it prevents focus
2021年のウェブ標準とブラウザ | gihyo.jp
2021年になりましたね。 矢倉眞隆（myakura）です。ウェブ標準やブラウザに興味のあるウェブ開発者です。gihyo.jpでは2009年に「Web標準とその周辺技術の学び方」という連載をしていました。 今回は昨年の泉水さんに代わり、2021年のウェブ標準やブラウザの動向を占おうと思います。2020年は世界もブラウザもそれなりに大きな出来事がありましたので、2020年の動きをまずおさえ、そのうえで2021年はどうなるのかを考えてみました。 W3Cのプロセス改訂でLiving Standardライクな仕様の改訂が増えていく W3Cは2020年9月に、新しいプロセス文書と特許ポリシーを公開しました。 新しい文書プロセスはW3Cの組織の定義や標準化の流れ、意思決定などについて定めた文書です。ここ数年は毎年更新されていますが、2020年はこれまでと比べて最大級とプレスリリースでもうたわれています
New browser on the block: Flow - QuirksBlog
2020 is only three weeks old, but there has been a lot of browser news that decreases rendering engine diversity. It’s time for some good news on that front: a new rendering engine, Flow. Below I conduct an interview with Piers Wombwell, Flow’s lead developer. This year alone, on the negative side Mozilla announced it’s laying off 70 people, most of whom appear to come from the browser side of thi
GitHub - niklasvh/html2canvas: Screenshots with JavaScript
The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. The script renders the current page as a canvas image, by reading the DOM and the
カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて (builderscon tokyo 2018) - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。先日開催されたbuilderscon tokyo 2018において「カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて」という発表を行いました。Webブラウザ上で、小説を縦組みで読むという機能に関するものです。その発表資料に補足と質疑応答の内容を加えて公開します。 なお、当日は資料を単一のHTMLファイルに切り出して、それをFirefoxで開き200%にズームした画面を映しながらプレゼンテーションしました。 カクヨムでの縦組み表示の実装と、縦書きWebの将来に向けて 自己紹介 nanto_vi (TOYAMA Nao) 株式会社はてな Webアプリケーションエンジニア Perl, TypeScript カクヨム KADOKAWA × はてな による小説投稿サイト 2016年2月正式オープン 縦組み表示 補足
srcN tests
srcN Tests Test 1 Is src1 misinterpreted as an src anywhere? <img src1="img/medium.jpg"> Test 2 Does an empty src value fire a request? <img src=""> Test 3 Does an omitted src value fire a request? <img src> Test 4 Does an omitted src attribute fire a request? <img> Setup Performing this test by running tail -f /var/log/apache2/access_log on my local machine, and hitting it with various test devic
)
Prerender and prefetch support
Use prerender and prefetch in Internet Explorer 11 to improve your website's navigation. Prerender (also called preload) specifies a webpage to be loaded (rendered) in the background while the user reads the current page and prefetch identifies resources to be downloaded in the background. Because both features download content before it's needed, the resources are instantly available when needed
Firefox が longdesc 属性をサポート... って前からしてなかったっけ？
ミツエーリンクスさんのアクセシビリティ Blog 経由ですが、Firefox が longdesc 属性をサポートするとのこと。なんですが、Firefox （っていうか Mozilla のころから） ってすでに longdesc 属性に対応しなかったっけ？ って思ったのでちょっと確認してみた話と、ついでなので longdesc 属性についてサンプルソースとか交えて簡単に書いてみます。 Firefox が longdesc 属性をサポートへ ： ミツエーリンクス アクセシビリティ Blog 現時点での longdesc 属性の状況 （HTML5 の拡張仕様、「HTML Image Description Extension」 として策定が進んでる件） や本件のあらましは、リンク先の記事がとてもわかりやすくまとめてくださっているので、そちらを見ていただいた方が早い。ということで下記に大胆に引用
CSS Preload Scanner in WebKit · ariya.io
CSS Preload Scanner in WebKit Apr 9, 2013 2 min read #css #optimization #web #webkit In WebKit world, preload scanner refers to a side parser which kicks in if the main HTML parser is halted by a blocking script loading. Because this preload scanner can see what other resources (e.g. stylesheets, images, inputs) are to be fetched, it can trigger the associated network requests as early as possible
Caniuse test page
This is a basic test suite of various web technologies for the When Can I Use website. It is used to quickly test basic support for features in upcoming browsers, rather than any full support of the feature's specification. Results on this page generally match the results as they appear on the When Can I Use site, but may not always due to a variety of circumstances (test may pass but support is a
Getting HTML5 Ready - ContentEditable : Remote Synthesis
In the prior editions of this series, we took a look at HTML5 parsing and CORS. This week, we'll take a look at a feature that, by itself, doesn't do anything terribly useful but, when combined with other features, can be used to do some interesting things. That feature is ContentEditable and it can be used to allow you to make any document regions editable, allowing a user to modify the text on t
新しいウェブ ブラウザ "escort" を公開しました | Shiki’s weblog
2012/07/01 #ESウェブブラウザ通信 今日でエスリルも2周年を迎えることができました。2周年記念ということで、本日エスリルで開発を進めてきた escortウェブ ブラウザ (Alpha版)のパッケージを公開しました。 escort 0.2.0 (alpha) escortウェブ ブラウザは、昨年からESウェブ ブラウザとしてオープンソースプロジェクトとして開発を進めてきた新しいウェブ ブラウザです。HTML/CSSレンダリング エンジンは完全に新規開発のものになります。またescortウェブ ブラウザでは、ユーザーインターフェイス(UI)自体もHTML/CSSとJavaScriptで作られています。今回リリースしたものはアルファ版ですので、開発者の方からフィードバックを送って頂いたり、実際に開発に参加していただいたりするきっかけになればと思っています。なお日常的に利用できるような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Introducing the popover API | Blog | Chrome for Developers
リファレンステストの書き方
Welcome to jonathantneal.com