Request for developer feedback: customizable select | Blog | Chrome for Developers
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo
UIにおける見えるけど利用できない非活性な領域の実装とinert属性について
モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 またモーダルダイアログをはじめとしてディスクロージャーなど、ユーザーの操作に応じて表示と非表示が切り替わるUIもあります。こうしたUIは視覚的には隠れているようでも、実装としては、つねにDOM上に存在しているHTML要素の属性だけを書き換えてレンダリング結果を制御するのが一般的です。 こうしたケースでは、特定の領域を操作できないように実装を行う必要があります。CSSでdisplay:noneかvisibility:hiddenが指定されたHTML要素はそれだけで操作できない状態になりますが、それ以外の方法で非表示になったHTML要素は、利用状況によっては
Everything you didn’t know you need to know about buttons
Let’s start by making one thing clear — you should not use a div for a clickable element (at least in 99% of cases). But why? Simply put, a div != a button. A div is simply a generic container, and is missing a number of qualities that a properly clickable element should have, such as: Divs are not focusable, for instance, your tab key will not focus a div as it will for any other button on your d
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
【CSS】セレクトボックスのプルダウンをデザインできるselectmenuが便利すぎた。 - Qiita
はじめに みなさんは、<select> タグを使う時、<option> をいい感じのデザインしたいと思ったことはないでしょうか？ 多くの方は、妥協して、<select> タグを使うか、ライブラリーを使うか、 <div>・<button>などを使いWAI-ARIA補完するなどで実装しているのではないでしょうか？ 実は、Open UIから提出された、セレクトボックスのプルダウンをデザインするための草案が、 Google Chrome チームとMicrosoft Edge チームの協力で実験的な機能として、<selectmenu> が公開されました。 そのため、この記事では <selectmenu> の具体的な内容の紹介と実装方法の解説を行います。 動作環境 <selectmenu> は、まだ実験的なものであるため、限られた環境で再現できます。 そのため、<selectmenu> が動いているの
Vercel OG(@vercel/og)でOG画像を動的生成する - dackdive's blog
こちらの記事を読んで。 以前から https://reading-list.zaki-yama.dev/ という自分のサイトに OG 画像を設定したいな〜と思っていたところに @vercel/og なるライブラリが登場したので試してみた。 ※ なお、今までずっと「OGP 画像」だと思ってたんだけど、記事中では OG image と表記されていたので、ここでも「OG 画像」と表記する。 @vercel/og の特徴 冒頭の記事を読む限り、今までは vercel/og-image というサービスが提供されていたが、これには以下のような問題があった。 難しい： Serverless Function 内で Chromium を起動し、 Puppeteer でスクリーンショットを撮る、ということをやっていた。これらのツールのセットアップは実装が難しくしばしばエラーを引き起こしていた 遅い：Chro
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions: When you run the demo, you'll see the <figcaption> immediately. Then, after a few seconds, this paragraph and subsequent page content shifts downwards to make room for the image. This makes the user experience massively frustrating, as content moves out from under the user's eyes/finger/poi
Webブラウザのレンダリングの仕組みを理解する
どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは？ 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考：https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考：ht
TablesNG Resolves 72 Chromium Bugs for Better Interoperability | Blog | Chrome for Developers
TablesNG launches in Chromium 91, and fixes a ton of bugs that have been a part of the web platform for years. These updates will improve browser compatibility as a part of the #Compat2021 effort, and improve using tables on the web platform overall. Some of the most-starred issues include position: sticky in rows, subpixel geometry, and proper border-collapsing. The TablesNG effort TablesNG is a
How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15% | web.dev
Yahoo! JAPAN is one of the largest media companies in Japan, providing over 79 billion page views per month. Their news platform, Yahoo! JAPAN News has more than 22 billion page views per month and an engineering team dedicated to improving the user experience. By continuously monitoring Core Web Vitals, they correlated the site's improved Cumulative Layout Shift (CLS) score with a 15% increase in
Xslateのpre_process_handlerを使ってCSSのインライン化をする - $shibayu36->blog;
この前 XslateのテンプレートをCSSインライン化する - $shibayu36->blog;という記事をかいたのだけど、その時にgfxさんにコメントで gfx BKっぽい気もしますが他にいい方法は思いつかないし、最近 pre_process_handler という機能も足したので、まあ許容範囲じゃないすかね。 と言われた。 pre_process_handlerというものがあったことを知らなかったので、試しに利用してみた。 pre_process_handlerを使ってtemplateに対してCSSインライン化する さてやりたかったことを振り返ると メールを一通一通CSSインライン化するのではなく、先にtemplateをインライン化しておいて、それを利用してrenderしたい ということでした。 例えば以下のようなtemplateを用意します。 <html> <head> <styl
Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
A CSS only “click to animate gif” solution | Christian Heilmann
Here’s a quick experiment in pure CSS how to cover a GIF with a play button instead of playing it. You can see it in this codepen or also play with it on GitHub. The GitHub code repository is also available. See the Pen CSS only "click to show GIF" by Christian Heilmann (@codepo8) on CodePen. Animated GIFs are fun, but they can also be annoying as hell. To some people, they can even be a health is
WPTをChromeで実行してHTML5 APIを理解する - Qiita
WPTとは WPT (web-platform-tests)という、ブラウザを作っている人のためのテストスイートがある。これは、ブラウザがどう動くべきかを定義している様々なWeb標準を、各ブラウザが満たしていてるかを確認するためのテストなのだが、Webサイトを作っているWebデベロッパーが新しいWebのAPIをどう使ったらいいかを調べるときにも役立つと思う。 という話を、電車で横に座っていたとある人に話したら「じゃあ、やり方を(日本語で)紹介してくださいよ。」と言われたので、簡単に紹介したい。 手軽に試す 手軽に試したければ、https://w3c-test.org 以下にある目的のテストファイルを開くといい。 例えば、Service Worker Navigation Preloadのテストであれば https://w3c-test.org/service-workers/service
サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス
ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築
Measure performance with the RAIL model | Articles | web.dev
Measure performance with the RAIL model Stay organized with collections Save and categorize content based on your preferences. RAIL is a user-centric performance model that provides a structure for thinking about performance. The model breaks down the user's experience into key actions (for example, tap, scroll, load) and helps you define performance goals for each of them. RAIL stands for four di
Do This to Improve Image Loading on Your Website
Ever since responsive web design started, we've had a problem with the way images load on the web. Now, Firefox is fixing the problem. Add width & height attributes to all your images, and see load jankiness disappear. Jen Simmons explains how. Try out the demos for yourself: Fixed-width layout: https://codepen.io/jensimmons/pen/jOONZaZ?editors=1100 Responsive layout: https://codepen.io/jensimmo
カクヨムでの縦組み表示の実装と、縦書き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月正式オープン 縦組み表示 補足
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MathML Core Explainer
Presentation Attributes Vs Inline Styles | CSS-Tricks