@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

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?

scott, to random
@scott@typetura.social avatar

deleted_by_author

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

    @scott Congrats!

    zachleat, to random
    @zachleat@zachleat.com avatar

    how do I defragment my friends currently spread across 3+ social medias

    ppk,
    @ppk@front-end.social avatar

    @zachleat Create a fourth one to end the chaos! One social medium to rule them all!

    noleli, to webdev
    @noleli@mastodon.social avatar

    By my count, there are now 41 units‽ That’s a lot!

    (definitions mostly from MDN)

    https://files.mastodon.social/media_attachments/files/110/335/257/741/337/345/original/87427261262c9437.png

    ppk,
    @ppk@front-end.social avatar

    @scottjenson @thejeanthdegree @noleli I will bring order to this chaos. The really difficult ones are the typographical ones like ch and ex that are not defined as pixels or container percentage.

    Also, too, CSS units are extremely fashion-sensitive. You're seeing an archaeological record of past CSS unit fashion.

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

    Interesting. Firefox supports display: flow-root list-item, while Chrome and Safari do not. Same for inline list-item.

    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.

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

    Is it possible, with at-property or something, to read an HTML attribute as a number and assign it to flex-grow?

    I can read the attribute value just fine, but I suspect it is passed to flex-grow as not-a-number-but-something-else.

    Not sure if this can be solved; I didn't find any <number> type for at-property. I tried <length> but it didn't work.

    /cc @leaverou

    ppk,
    @ppk@front-end.social avatar

    @leaverou https://quirksmode.org/booktests/parliament-lea.html

    The idea is to have it work like the graph linked to in the page, but without JavaScript for the flex-grow assignment.

    ppk,
    @ppk@front-end.social avatar

    @leaverou Yeah, I thought to put the attr in a custom property and then do at-property magic, but that doesn't seem to work, or I did it wrong.

    I don't understand all these advanced tricks anyway, I'm just a humble web developer.

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

    So there is an problem with order.

    It hasn't been solved, right? Have any suggestions for solving it been made?

    I didn't look at this problem in 20 months or so, and stuff may have changed.

    ppk,
    @ppk@front-end.social avatar

    @yatil It's not a huge problem, but if some beginning web dev starts using order to figure out the perfect order of their 127 flex items ...

    Thx for the link. That's the one I saw earlier.

    ppk,
    @ppk@front-end.social avatar

    @tink To me, the obvious solution would be for the AOM to follow the order property. But I guess there's all kinds of caveats and tricky edge cases.

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

    So in order to explain why flex-basis even exists I have to:

    1. create an example with the same bit of content in a horizontal and vertical direction

    2. explain why width won't work for inline-sizing the vertical content

    3. remind people that nowadays we should use inline-size instead of width

    (cont)

    ppk,
    @ppk@front-end.social avatar

    1. explain that inline-size did not yet exist when the flexbox spec was published

    2. and that the spec therefore introduced flex-basis for the same purpose

    3. but that, more or less by accident, flex-basis is not the same as width (or inline-size) for that matter

    Wonderful.

    ppk,
    @ppk@front-end.social avatar

    @Meyerweb How To Survive Writing A CSS Book, lesson 14: Avoiding Flexbox (reading time: 23 hours)

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

    Also, too, now that we have inline-size we don't really need flex-basis any more - except for the special behaviour it displays, quite contrary to the spec.

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

    So ... writing mode changes the direction of the main and cross axes ...

    ... and flex-direction changes the axis and direction the flex items are laid out in without changing the axes ...

    ... and for teaching purposes flex-direction: main or cross would be useful, but it's column and row instead, even when the axes are swapped and column actually means row ...

    ... and logical-like properties don't even appear to be proposed for flex-direction ...

    No wonder flexbox is such a pain to teach.

    zachleat, to random
    @zachleat@zachleat.com avatar

    I wonder if https://caniuse.com/ is planning to remove browsers that haven’t had a release in 10 years (e.g. Internet Explorer)

    (cc @Fyrd)

    ppk,
    @ppk@front-end.social avatar

    @Fyrd @zachleat Four years ago someone thanked me for the IE5.5 coverage on my site. She worked on some godawful SAP system where IE5.5 was still the default browser. In 2019. And no one else had any info about it.

    There are niche markets for which access to ancient browser info is important. And it doesn't hurt anyone to keep the info in place.

    brianleroux, to random

    Anyone here have travel tips for Crete and/or Athens? Planning a trip this June

    ppk,
    @ppk@front-end.social avatar

    @brianleroux I, too, will be in Greece in June, but on Zakynthos in the west.

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