An origin trial for a new HTML <permission> element | Blog | Chrome for Developers
There are a number of imperative methods for asking for permission to use powerful features like location access in web apps. These methods come with a number of challenges, which is why the Chrome permissions team is experimenting with a new declarative method: a dedicated HTML <permission> element. This element is in origin trial from Chrome 126, and ultimately we hope to standardize it. Imperat
Target=_blank implies rel=noopener
If you want to be a good web citizen, you might be aware of the target="_blank" security issue. In the old days, when you linked to a site and wanted to open a new tab with target="_blank", the target site could access your site via window.opener. This means in short: If window A opens window B, B.opener returns A. If you haven't heard of this behavior, it's pretty wild because it implies that tar
Using the Popover API for HTML Tooltips – Frontend Masters Boost
Using the Popover API for HTML Tooltips May 6, 2024 We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos. I tried to adhere to the points made in there the best I could while making a classic t
Popover API lands in Baseline | Blog | web.dev
Popover API lands in Baseline Stay organized with collections Save and categorize content based on your preferences. It's happening! One of the features I am most hyped about has just landed across all modern browsers and is officially a part of Baseline 2024. And this feature is the Popover API. Popover provides so many awesome primitives and developer affordances for building layered interfaces
My “Skip to content” markup was breaking the back button on iOS · Dan Cătălin Burzo
One of the great joys of having your own website is being able to publish all sorts of random pages, such as this listing of DOM events, because why not. Perusing these sort of reference pages I built for myself, it became increasingly grating that the basic feature of maintaining the scroll position during navigation seemed to be broken on iOS Safari. I checked: the issue didn’t affect all websit
How to think about HTML responsive images · Dan Cătălin Burzo
The days with an immobilized knee are long and I’ve just read through the Images section of the HTML Standard, as one does, hoping to better understand how responsive images work. What’s a responsive image? The term responsive image encompasses two complementary approaches. In the context of responsive web design, a responsive image is one that’s made fluid with the width, height, aspect-ratio, an
Positioning anchored popovers
Popovers are commonly positioned relative to their invoker (if they have one). When we use the popover attribute, anchoring is tricky, as these popovers are in the top layer, away from the context of their invoker. What options do we have? Basically, there are two ways to position popovers: one you can use today and one that will be available in the future. I'll detail them below, but first, let's
An HTML Switch Control
We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch. Two switches as seen on iOS, with the second switch using a custom CSS accent-color. The HTML for this example looks roughly like this: <style> .special { accent-color: papayawhip } </style> <input type=checkbox switch checked> <input type=checkbox switch checked class=special> Switches are a popular control
MDN Curriculum | MDN Curriculum
The MDN Curriculum provides a structured guide to the essential skills and practices for being a successful front-end developer, along with recommended learning resources. Last updated: February 2024 Beginner's level Self-paced Free The go-to resource for the essential skills and knowledge every front-end developer needs for career success and industry relevance. Developed by Mozilla and refined w
Bringing Back Horizontal Rules in Select Elements
In September 2023, Safari 17.0 on macOS shipped a small but interesting change to the <select> element. You can now put an <hr> element, known as a horizontal rule, inside a <select> element, which will draw a horizontal line again. Again, because Safari used to support this over a decade ago — more on that story later. The horizontal rule creates visual breaks between options to help users scan a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Feedback on a Pagination Pattern
Footnotes Progressively Enhanced to Popovers – Frontend Masters Boost
How Deep is Your DOM? | Frontend at Scale
Fine-tuning Text Inputs
Why you need to go back to basics if you want to learn HTML or CSS – Baldur Bjarnason
Anchor Links and How to Make Them Awesome
Declarative Design
Popover API | 12 Days of Web
WebAIM: Semantic Structure: Regions, Headings, and Lists
The Valley of Code
