zcorpan - Network

- The automatic heading level (a.k.a. the outline algorithm) was dropped from the spec, but the default UA stylesheet remained. This is what...

- The automatic heading level (a.k.a. the outline algorithm) was dropped from the spec, but the default UA stylesheet remained. This is what we're trying to remove now.

- The default rendering was implemented in browsers, but not the heading level in the accessibility tree.- Websites started to use...

- The default rendering was implemented in browsers, but not the heading level in the accessibility tree.
- Websites started to use sectioning elements, but didn't expect automatic heading levels. It was not possible for browsers to change that without breaking user expectations.

The backstory here is- h1 was specified to have automatic heading level based on the number of ancestor sections (or aside, article, nav).-...

The backstory here is

- h1 was specified to have automatic heading level based on the number of ancestor sections (or aside, article, nav).
- The default rendering was specified to (roughly) match, such that <section><h1> would have the same font-size and margin as h2
- cont...

Here's the new 2025 reset.css:h1 { margin-block: 0.67em; font-size: 2em; }Thank you for adopting this on all your sites!See...

Here's the new 2025 reset.css:

h1 { margin-block: 0.67em; font-size: 2em; }

Thank you for adopting this on all your sites!

See https://github.com/whatwg/html/issues/7867

Got an answer on X.Inkscape: Path, Object to Path

Got an answer on X.

Inkscape: Path, Object to Path

How do I convert an SVG with text and embedded TTF webfont (as data url, but can make the font external if needed) into SVG paths?

How do I convert an SVG with text and embedded TTF webfont (as data url, but can make the font external if needed) into SVG paths?

Bonus: some slides reference https://wpc.guide (which I helped write when I worked at Bocoup) which I think is useful material for...

Bonus: some slides reference https://wpc.guide (which I helped write when I worked at Bocoup) which I think is useful material for onboarding folks interested in contributing to the web platform.

End.

Also see web-platform-tests documentation on how to write a testing plan (by Mike...

Also see web-platform-tests documentation on how to write a testing plan (by Mike Pennisi)

https://web-platform-tests.org/writing-tests/making-a-testing-plan.html

Finally, as promised, a link to my slides of my 2020 presentation for how to write web-platform-tests (and why)

https://slides.com/zcorpan/contributing-tests-for-browsers-is-good-for-the-web

Thanks all for the actual heavy-lifting!@dbaron @bkardell @fantasai @Meyerweb @annevk :smaug @emilio Koji Ishii @rniwa and more — look...

Thanks all for the actual heavy-lifting!

@dbaron @bkardell
@fantasai
@Meyerweb
@annevk :smaug @emilio Koji Ishii @rniwa
and more — look at this long GH thread!

https://github.com/whatwg/html/issues/3699

Now, most likely :dir() would have gotten the same attention anyway (because there was enough web developer demand), but I like to think...

Now, most likely :dir() would have gotten the same attention anyway (because there was enough web developer demand), but I like to think about butterfly effects and how something I spent about an hour on 3 years ago got this momentum!

I also have to attribute Bootstrap since they created the Wall of browser bugs for Bootstrap 4.5, where :dir() support was requested for...

I also have to attribute Bootstrap since they created the Wall of browser bugs for Bootstrap 4.5, where :dir() support was requested for Edge/Chrome/Safari as a Most Wanted Feature, and the reason I picked it to write the demo testing plan.

https://getbootstrap.com/docs/4.5/browser-bugs/

... :dir() was part of the Interop 2023 CSS Pseudo-classes focus area (not including Shadow DOM spec changes). Currently, Firefox passes...

... :dir() was part of the Interop 2023 CSS Pseudo-classes focus area (not including Shadow DOM spec changes). Currently, Firefox passes 97.9%, Chrome/Edge and Safari pass 100%. Not only supported across browsers but also interoperable!

https://wpt.fyi/interop-2023

... many new tests have been written, 40+ for the Shadow DOM change but also generally per the original testing...

... many new tests have been written, 40+ for the Shadow DOM change but also generally per the original testing plan.

https://github.com/web-platform-tests/wpt/issues/25569

... there's a proposal to add :dir() as an Interop 2024 focus area, where, if accepted, participating browsers commit to improving interoperability (by passing more tests)!

https://github.com/web-platform-tests/interop/issues/535

In 2020, I created a presentation about how to write web-platform-tests. (Link to slides in thread.)As part of that, I made a...

In 2020, I created a presentation about how to write web-platform-tests. (Link to slides in thread.)

As part of that, I made a "demo" testing plan for the :dir() pseudo-class, and a PR to add testing coverage for <input type=tel>. At the time :dir() was Gecko-only.

Now ... :

... :dir() is implemented in WebKit (since Safari 16.4), Chromium (since M120), and Gecko.

https://caniuse.com/css-dir-pseudo

... the HTML spec for "directionality" has been updated to support Shadow DOM

https://github.com/whatwg/html/pull/9796

Nice to see several focus areas with 100% pass rates in Interop 2023!Firefox Nightly now has 100% for :has() 🎉 and it will ship in...

Nice to see several focus areas with 100% pass rates in Interop 2023!

Firefox Nightly now has 100% for :has() 🎉 and it will ship in Firefox 121 🎉🎉

https://wpt.fyi/interop-2023

Can we change the default of `<meta name=viewport>` to `width=device-width,initial-scale=1` so that it's no longer part of the...

Can we change the default of `<meta name=viewport>` to `width=device-width,initial-scale=1` so that it's no longer part of the Required Pragma?

Web devs: assuming you can do@ import url("...") supports("...") ...;and<link rel=stylesheet href="..."...

Web devs: assuming you can do

@ import url("...") supports("...") ...;

and

<link rel=stylesheet href="..." media="supports(...) ...">

would you expect this to work also?

@ media supports(...) ... {}

Yes
No
See results

Hey @Wilto do you happen to have RICG irc logs still available? Link in https://github.com/ResponsiveImagesCG/picture-element/issues/247 is...

Hey @Wilto do you happen to have RICG irc logs still available? Link in https://github.com/ResponsiveImagesCG/picture-element/issues/247 is broken

#GitHub tip: use this alias by @gnarf to checkout PRs by number without having to add remotes etc.$ git pr...

#GitHub tip: use this alias by @gnarf to checkout PRs by number without having to add remotes etc.

$ git pr 1234

https://gist.github.com/gnarf/5406589

Yay! This is now available cross-browser."The <source> element supports height & width attributes when it is a child of a...

Yay! This is now available cross-browser.

"The <source> element supports height & width attributes when it is a child of a <picture> element." in Firefox 108

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/108

Spec issue: https://github.com/whatwg/html/issues/4968
Spec PR: https://github.com/whatwg/html/pull/5894