@ppk@front-end.social
@ppk@front-end.social avatar

ppk

@ppk@front-end.social

Writing a #CSS book - technical writer - #browser expert - #cssday and #perfnow conference co-organiser - #WebMonetization - #history geek - former Later Roman Empire specialist - native of #Amsterdam - recovering Tweeter

This profile is from a federated server and may be incomplete. Browse more on the original instance.

ppk, to random
@ppk@front-end.social avatar

... and with that the Layout part exists as a massive 38.5K word draft - though without the Grid chapter that I only have as a half-draft.

ppk, to webdev
@ppk@front-end.social avatar

Things I realised from writing the #css book, part 2347: outlines do NOT influence margin collapsing.

ppk, to accessibility
@ppk@front-end.social avatar

#a11y #screenreaders

If an element has visibility: hidden but a child has visibility: visible, do screen readers announce the child?

ppk,
@ppk@front-end.social avatar

@kizu Thanks.

ppk,
@ppk@front-end.social avatar

@tink Thanks. It seems no one tested this before ... ?

ppk,
@ppk@front-end.social avatar

@tink I tried to use VoiceOver for the first time in my life to test this on Mac, but couldn't figure out how to actually make it read the test page. It just said "Web Content."

Only goes to show that screen reader testing is a separate discipline altogether.

ppk, to random
@ppk@front-end.social avatar

Right, visibility: collapse .... I haven't even thought about it in ten years. It still doesn't work in Safari/Mac. (iOS not tested.)

torgo, to random

On our way to Amsterdam. 🚄

ppk,
@ppk@front-end.social avatar

@torgo Huh? Business or pleasure?

ppk, to random
@ppk@front-end.social avatar

Position chapter finished - though I think the sticky section needs some more work or examples.

zachleat, to random
@zachleat@zachleat.com avatar
  1. 👏 Hire someone that’s good at HTML and CSS to build components independent of JS frameworks 👏
  2. Plug components into a JS framework and layer on behavior later
  3. Pay HTML/CSS devs what they deserve for giving part of your code-base longer shelf life than unpasteurized milk
ppk,
@ppk@front-end.social avatar

@sil @zachleat Yes, I'd be fine with JS frameworks being called "roadies" from now on, doing their invisible DOM work backstage in support of the greater good.

ppk, to random
@ppk@front-end.social avatar

Oh brilliant, a Chrome bug in position: sticky. That's exactly what I need while writing about position: sticky.

ppk,
@ppk@front-end.social avatar

... and all of a sudden the bug's gone, after I spend an hour in a conference call ... ?

ppk, to webdev
@ppk@front-end.social avatar

Have you ever used position: fixed to fix an element not to the viewport/HTML element but to another element? If so I'd love to see a code example.

ppk,
@ppk@front-end.social avatar

@mrtnvh Zet de fixed layer in een element met 1 van deze properties

contain: paint or layout (but not size)
transform or perspective, any value
will-change: transform or perspective

Maar vervolgens gedraagt de fixed layer zich als een absolute layer.

philhawksworth, to random

Make stuff for the web?

Netlify are running a survey on web development things.
If you can spare 10 minutes for it, we'll have all the better info to share.

https://www.surveymonkey.com/r/devsurvey2023

ppk,
@ppk@front-end.social avatar

@philhawksworth

"Composable architecture is a modern approach to building and managing websites that brings together modular technologies that build on each other to create a “stack”: for example a hosting provider, a CMS, and a database as a service, composed to build a website."

Is this what we used to call "a website"? Not sure. But if it is, I like the attempt to make it sound cool for full-stack thingies.

sil, to random
@sil@mastodon.social avatar

and #Eurovision begins!

ppk,
@ppk@front-end.social avatar

@sil Indeed, not reading Camus is the best way to attract a partner. Glad you finally see the truth.

zachleat, (edited ) to random
@zachleat@zachleat.com avatar

decorative LEGO

ppk,
@ppk@front-end.social avatar

@zachleat Declarative LEGO.

ppk, to accessibility
@ppk@front-end.social avatar

There was an problem with display: contents. Is that still an issue, or has it been resolved?

ppk,
@ppk@front-end.social avatar

@yatil Hmm, tricky. I need to summarise these findings in one or two sentences. Saying there are a11y issues is easy, but suggesting a solution isn't. Seems there is no solution.

ppk,
@ppk@front-end.social avatar

@aardrian @yatil OK, thanks, that's good advice.

ppk,
@ppk@front-end.social avatar

@aardrian @yatil

Is this a good summary?

Unfortunately display: contents suffers from accessibility problems. In some browsers , semantic information is removed from children of an element with display: contents.

The example uses <div>s, and they do not carry such information. If you restrict yourself to elements with little or no semantics you will evade this problem. In particular, you shouldn’t place interactive elements such as form fields or links in an element with display: contents.

ppk, to random
@ppk@front-end.social avatar

Hmmm ... it used to be the case that, if you give a <td> a display: flex, it would skew all out of alignment with the other <td>s because you replaced the display: table-cell.

But I just tested this again, and it works OK in browsers - at least visually.

Does anyone know if this behaviour has changed in the past couple of years?

ppk,
@ppk@front-end.social avatar

@Thain Yes, there are semantic problems. But there used to be visual problems as well, and they're a lot easier to explain. But now the visual problems are gone.

patrick_h_lauke, to random
@patrick_h_lauke@mastodon.social avatar

imagining one desperate Tory councillor that keeps demanding a recount...

ppk,
@ppk@front-end.social avatar

@patrick_h_lauke What's RA?

ppk,
@ppk@front-end.social avatar

@patrick_h_lauke Local parties. OK.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • InstantRegret
  • mdbf
  • ethstaker
  • magazineikmin
  • GTA5RPClips
  • rosin
  • thenastyranch
  • Youngstown
  • osvaldo12
  • slotface
  • khanakhh
  • kavyap
  • DreamBathrooms
  • JUstTest
  • Durango
  • everett
  • tester
  • cisconetworking
  • Leos
  • cubers
  • modclub
  • ngwrru68w68
  • tacticalgear
  • anitta
  • provamag3
  • normalnudes
  • lostlight
  • All magazines
    •