Building a tooltip component | Articles | web.dev
In this post I want to share my thoughts on how to build a color-adaptive and accessible <tool-tip> custom element. Try the demo and view the source! A tooltip is shown working across a variety of examples and color schemes If you prefer video, here's a YouTube version of this post: Overview A tooltip is a non-modal, non-blocking, non-interactive overlay containing supplemental information to user
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
Building the main navigation for a website | Articles | web.dev
There are many different ways of building the main navigation of a website, in terms of styling, functionality, and the underlying markup and semantic information. If the implementation is too minimalist, it works for most people, but the user experience (UX) might not be great. If it's over-engineered, it might confuse users or even hinder them from being able to access it at all. For most websit
縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
Indiepen
Embed your HTML, CSS and JS example with Indiepen An independent and privacy-friendly solution to present your code examples to the people. Why Indiepen? This project was initially developed because we wanted to show code examples on yetanother.blog. We use platforms to share code examples every day and we love them, but they didn’t fit our requirements. We care about a modern, fast and fair web.
Hiding content responsibly
I wrote about hiding content during the A11yAdvent calendar, namely how to make something invisible but still accessible for screen readers. I’m going to mention the “accessibility tree” a few times in this article, so be sure to read how accessibility trees inform assistive technologies by Hidde de Vries. In this article, I want to discuss all the ways to hide something, be it through HTML or CSS
Building a Tabs component | Articles | web.dev
In this post I want to share thinking on building a Tabs component for the web that is responsive, supports multiple device inputs, and works across browsers. Try the demo. Demo If you prefer video, here's a YouTube version of this post: Overview Tabs are a common component of design systems but can take many shapes and forms. First there were desktop tabs built on <frame> element, and now we have
2021年のウェブ標準とブラウザ | gihyo.jp
2021年になりましたね。 矢倉眞隆（myakura）です。ウェブ標準やブラウザに興味のあるウェブ開発者です。gihyo.jpでは2009年に「Web標準とその周辺技術の学び方」という連載をしていました。 今回は昨年の泉水さんに代わり、2021年のウェブ標準やブラウザの動向を占おうと思います。2020年は世界もブラウザもそれなりに大きな出来事がありましたので、2020年の動きをまずおさえ、そのうえで2021年はどうなるのかを考えてみました。 W3Cのプロセス改訂でLiving Standardライクな仕様の改訂が増えていく W3Cは2020年9月に、新しいプロセス文書と特許ポリシーを公開しました。 新しい文書プロセスはW3Cの組織の定義や標準化の流れ、意思決定などについて定めた文書です。ここ数年は毎年更新されていますが、2020年はこれまでと比べて最大級とプレスリリースでもうたわれています
sciter – Multiplatform HTML/CSS/JavaScript UI Engine for Desktop and Mobile Application
Embeddable HTML/CSS/JavaScript engine for modern UI development Some real life applications that use Sciter core engine for their UI – HTML/CSS under the hood. Build cross platform desktop applications with HTML, CSS and script Sciter brings a stack of web technologies to desktop UI development. Web designers, and developers, can reuse their experience and expertise in creating modern looking desk
表示速度を飛躍的に向上させる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
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs | CSS-Tricks
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number tools (revolving around HTML and CSS) we have at the ready, from responsive images to relatively new
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~
Guess CSS! HTML & CSS puzzler game
Introduce CSS Module Script by dandclark · Pull Request #4898 · whatwg/html
JSitor - JavaScript, HTML, CSS, online editor
GitHub - andybrewer/mvp: MVP.css — Minimalist classless CSS stylesheet for HTML elements
GitHub - microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer
Amazon.co.jp: フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装: 安達稜, 武田諭: 本
CSS via inline variables