Change the content on your page based on the light level in the room using the Ambient Light API. You can play around with the sensor.illuminance value in the pen to switch at different levels.
Give it a try: s.codepen.io/mandymichael/de…
See the code: codepen.io/mandymichael/pen/…
Is it documented somewhere how the different browsers map font weights? I’ve been doing some googling and not come up with anything useful
Eg if there is no 500 weight does it load 400, 600 etc?
Looking forward to #LaraconAU so pumped I finally get to attend! Sadly Jello won’t be there but he’s always there in spirit! 😄
I’ll be explaining how you can use HTML to set a good foundation for improving your website/application’s performance 💖😊
Hope to see you there!
👋🏻 Say g'day to @Mandy_Kerr
After years of scheduling conflicts, we're excited to have Mandy join us and share her expertise in performant HTML and accessibility at #LaraconAU!
Join over 300 fellow artisans 👉🏻 laracon.au/tickets
In Firefox, when it underlines the font in use in dev tools if you have a -apple-system or BlinkMacSystemFont or ui-sans-serif it will underline the generic one at the end eg sans-serif (this happens even if you change sans-serif monospace but it will still be sansserif) - why?
Another beautiful customized select with a usable fallback 🧑🍳😘
This API is awesome 😊
Makes my heart full to see this finally moving along in the WHATWG and browser prototypes ❤️
common question I'm getting:
how to disable scrolling the page behind a <dialog>?
answer: with :has!
```#css
html:has(dialog[open]) {
overflow: hidden;
}
```
🆕 Mini Web Machine
Pop n' Lock
- <dialog> basics
- explanations of top-layer, overlay and transition-behavior
- how to transition a <dialog>
⤷ nerdy.dev/pop-n-lock-dialog-…
ALT show thumbnail image says The Dialog Machine - Mini Web Machines
🤩 View Transitions excitement!
The Firefox team recently had a kick-off meeting to implement View Transitions.
docs.google.com/document/d/1…
“Goal and scope of the project: Single page in H2 2024”
ALT Animated GIF of a person in a crowd being impressed by what they just saw.
The last 2 weeks have been the worst of my life. 1yr old was in hospital all last week with RSV - my husband & I both got sick as well. having a child in hospital sick is horrible we made it worse by neglecting our heath to focus on her (understandably) Now we are still very sick
This is wild! What you see here is a CSS-only range slider that automatically adjusts the tooltip. 🤯
It's Chromium-only because it relies on @property, scroll-driven animations and anchor-positioning but the CSS future is bright, friends!
css-tip.com/range-slider-too…
There are a lot of people with the "flex works good enough" mentality. A lot of them learned to get flex to do most things because it was the only option they had at the time, and then they dole out that advice to others 🙃