jonjohnjohnson

Break browsers, not hearts.

[jonjohnjohnson @jonjohnjohnson]

IMHO the most effective leaders in web standards are the best “centrists” we’ve got. The dialectics of stability and progress are difficult. Looking at you @w3c 🙌.

[jonjohnjohnson @jonjohnjohnson]

@majido Do you see what I see here? https://t.co/S6R4E6XJKq

[jonjohnjohnson @jonjohnjohnson]

@benfrain In the "Aria-Pressed" section "menu" is misspelled as "manu"!

[jonjohnjohnson @jonjohnjohnson]

@mmatuzo Just letting you know the TIL#12 on your website isn't limited to Firefox or block-level behavior. Chrome also supports focus of user scrollable containers. Scroll containers just require a block formatting context, but can be inline. https://t.co/2vN64HySpi

[jonjohnjohnson @jonjohnjohnson]

@micahgodbolt Not exactly proud of this not mobile first chunk in my project starter...

@media screen and (max-width: 320px) {
html { font-size: 5vw }
}

But I've had it force my hand to create accessible layout down to 320px for years. FTMP 320px wide is a decent metric for accessibility.

[jonjohnjohnson @jonjohnjohnson]

@jaffathecake @rikschennink I can't imagine rubberbanding, the elastic effect, would not be present with their recent efforts in https://t.co/TlOth7wYaM, where overscroll-behavior has an initial value of auto.

[jonjohnjohnson @jonjohnjohnson]

@davatron5000 Any ideas @eqrion? I know you've recently worked on some gecko scroll (anchor) related things à la https://t.co/cfB9qfp6mi.

[jonjohnjohnson @jonjohnjohnson]

@micahgodbolt Scroll timelines in animation worklets! https://t.co/g4vcc9bcB4 https://t.co/kJpMWcOMIc https://t.co/p6KPA2zvuK

[jonjohnjohnson @jonjohnjohnson]

@bdc And if you want to respect the internal and subsequent flow of content, you could change to using cacl() maths padding/margin instead of height, like this utility.
https://t.co/OwJOfZg447

[jonjohnjohnson @jonjohnjohnson]

@rachelandrew I recently updated your mdn writings on the inset shorthand to communicate physical mapping, instead of logical. Please feel free to tweak any of my changes if they can be improved or were incorrect. https://t.co/6oGZJaOuBJ https://t.co/PewX5FexrZ

[jonjohnjohnson @jonjohnjohnson]

@MagalieLinda @Real_CSS_Tricks It's for things like on-screen keyboards that can obscure the viewport while simply manipulating the visual viewport, to allow positioning part of your UI inside.

[jonjohnjohnson @jonjohnjohnson]

@anatudor As @tabatkins points out... "env() also should be usable in further contexts outside of properties on elements, such as in MQs" https://t.co/zR2osJ9leL

[jonjohnjohnson @jonjohnjohnson]

CSS surely has no syntax for conditional booleans,
...except when dealing with lengths.

calc((var(--bool) * 300px) + ((1 - var(--bool)) * 100vh))

[jonjohnjohnson @jonjohnjohnson]

.isHome a[href="/"] {
pointer-events: none;
text-decoration: none;
color: inherit;
}

[jonjohnjohnson @jonjohnjohnson]

Please no.

[jonjohnjohnson @jonjohnjohnson]

@necolas I remember you writing on flexible cover images. Wondering about your thoughts on this flexible approach? https://t.co/GXuYWkRB1J

[jonjohnjohnson @jonjohnjohnson]

Until we have css element queries, here’s a css way to clean up some sloppy ways responsive elements appear… https://t.co/ONJivAOU9r

[Šime Vidas (I’m on 🐘) @simevidas]

<img srcset> now reacts to resize/viewport changes in Firefox:

[nixCraft 🐧 @nixcraft]

The last and best programming book you'll ever need ;) #humor

[jonjohnjohnson @jonjohnjohnson]

Look ma! No Javascript! https://t.co/QFCafGx2xi

…view in most recent iOS/safari/firefox, using ‘scroll-snap’ and ‘clip:rect()’