@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

It just occurred to me that pretty soon web developers need to test their sites on the new Chrome/Blink/iOS and Firefox/Gecko/iOS and other new iOS browsers

....

BUT THEY CAN'T outside the EU

...

ppk,
@ppk@front-end.social avatar

@angelikatyborska https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/

ppk,
@ppk@front-end.social avatar

@Meyerweb Also, too, if I travel to the US with my EU iPhone, what will happen to my browsers?

That, at least, is something I'll be able to test later this year.

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

So alternate browser engines will be allowed on iOS but only in the EU...

Sounds like that means some people will be on, say, Firefox on iOS (WebKit) while others will be on Firefox on iOS (Gecko). Funnnn.

ppk,
@ppk@front-end.social avatar

@Fyrd Does anyone test for Chrome/Webkit and Firefox/Webkit as distinct from Safari? I know there are a few very minor differences, but hardly in CSS/JS compatibility, right?

Also, too, need to buy an iPhone once I get back from my business trip ...

ppk,
@ppk@front-end.social avatar

@Fyrd .... oh wow people in the US just CAN'T TEST on Chrome/Blink/iOS !!!

I hadn't thought of that yet.

pixelambacht, to CSS
@pixelambacht@typo.social avatar

Is there a way to have to elements that live in different containers be sticky on top of each other?

I tried to sketch it: the first striped element is inside a div with another element above it. When scrolling, it needs to stick to the top. Easy peasy.

But then the second striped element, that lives in another container, needs to stick to the bottom of the top one.

I might be missing something obvious, but how to do this?

ppk,
@ppk@front-end.social avatar

@pixelambacht Make the top container sticky as well. The tricky bit is to calculate its correct sticky coordinate; not sure how to do that right now.

simon, to random
@simon@simonwillison.net avatar

The best management advice I ever got is to try and figure out what good management looks like and then put on a performance - try and act like a good manager, go through all of the required motions

Because it turns out imitating a good manager and actually being a good manager are mostly the same thing

(I think about this sometimes when I encounter debates about whether or not LLMs can reason about or understand content)

ppk,
@ppk@front-end.social avatar

@simon So ... we could just as well replace all management by LLMs?

That's an interesting thought ...

ajaxStardust, to javascript
@ajaxStardust@vivaldi.net avatar

Peter Paul is still out there and coding the best stuff! Our good ol' guru!

@ppk

Wrote a little bit about him, many moons ago...

https://wordpresscenter.net/ppk_on_javascript_quirksmode_comes_of_age/

ppk,
@ppk@front-end.social avatar

@ajaxStardust Yes, I'm still out ... here, I guess.

codepo8, to Amsterdam
@codepo8@toot.cafe avatar

Calling all tech folk in : is coming to town on the 29th of February! There'll be live code competitions, lots of prizes to win and networking opportunities. Tickets include 2 drinks vouchers and I really look forward to seeing you all!

https://www.wearedevelopers.com/events/code100

video/mp4

ppk,
@ppk@front-end.social avatar

@codepo8 Funny that it doesn't say where in Amsterdam it is.

ppk,
@ppk@front-end.social avatar

@codepo8 Will you be there yourself?

ppk,
@ppk@front-end.social avatar

@codepo8 Then let's meet up. It's been too long.

ppk,
@ppk@front-end.social avatar

@codepo8 Though, looking at my calendar, that's going to be a challenge.

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

For the third or fourth time in more than two years I feel the desire to blog about this bit of code; especially the stuff I can't do but that's probably too complicated.

But I don't have a blog. Need to install Wordpress first (shudder).

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

Finally got it:

dt:hover {
background: var(--accent);

& ~ dd:not(dt:hover ~ dt ~ dd) {
background: var(--accent);
}
}

dd:hover {
background: var(--accent);

dt:has(~ &):not(dt:has(~ dt ~ &)) {
background: var(--accent);

& ~ dd:not(dd:hover ~ dt ~ dd) {
background: var(--accent);
}
}
}

ppk,
@ppk@front-end.social avatar

Except for the Chrome bug, of course.

I prefer nesting here because it cuts down significantly on the number of selectors I need.

ppk,
@ppk@front-end.social avatar

@thudfactor My code is self-documenting!

ppk,
@ppk@front-end.social avatar

See what's going on at http://quirksmode.org/booktests/dl-hover.html IN FIREFOX. Safari doesn't have nesting; Chrome has a bug.

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

Well, it did net me a nice nested hover bug in Chrome.

https://quirksmode.org/weird-hover.html

ppk,
@ppk@front-end.social avatar

, in case anyone is interested.

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

Given this HTML:

<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>

How do I select all <dd>s up to the next <dt>?

dt + dd only selects the first one
dt ~ dd selects all dds in the entire list, including the ones I don't want.

ppk,
@ppk@front-end.social avatar

@boldewyn Yes, that's exactly what I'd like to avoid. I don't know how many dds I'll have.

ppk,
@ppk@front-end.social avatar

@css Not quite, because that only works for two dt/dd sets, and I don't know the number of sets, either.

This is tricky.

ppk,
@ppk@front-end.social avatar

@css It's for a hover effect

dt:hover + dd {}

but then all dds up to the next dt.

ppk,
@ppk@front-end.social avatar

@css Of course! Repeat the hover!

ppk,
@ppk@front-end.social avatar

@bramus @mia Yes, I found out about the greediness. Solution: more :has()!

https://quirksmode.org/booktests/dl-hover.html

ppk,
@ppk@front-end.social avatar

@bramus @mia Twitching from excitement that :has() works so well and is so popular. Yes, I can understand that.

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