ppk

ppk, 8 months ago to CSS

Aarghh! #css law: Thou shalt never use !important, except in very specific cases:

1. To find out if you have a specificity problem you can temporarily add !important to a declaration. If it's now applied, you know you have a specificity problem

2. .... the one I forgot. I posted this same question a while ago, and someone came up with a second legitimate use case for !important, but what was it?

Help!

ppk, 9 months ago (edited 9 months ago) to random

Did you use an image map in the last five years? You know, <map> and <area> and such?

(Background: I want to call image maps "old-fashioned" and I'd like to know if I can do so.)

ppk, 10 months ago to random

Looking for an HTML attribute that sometimes needs several space-separated values.

Not class, also not text attributes such as alt or title.

Any ideas?

ppk, 11 months ago to webdev

Do you have a favourite non-obvious use of #css #grid? I'm looking for nice examples for my Grid chapter that will expand beyond "here's how you make a responsive four-column grid"

ppk, 8 months ago to CSS

I'll start on the #css cascade chapter now.

Can anyone give a good example of a user stylesheet?

My feeling is that they aren't used a lot, but I might be wrong, and also it occurred to me that others can write a user stylesheet for someone who needs big font sizes or something.

So: any good examples?

ppk, 10 months ago to random

position: absolute in grid and flexbox is pretty interesting, actually.

.container {
display: flex/grid;
justify-content: center;
position: relative;
}

.item { /* in container */
position: absolute;
align-self: center;
justify-self: center;
}

The item is now centred in the container.

ppk, 10 months ago to random

[att=val]
[att~=val]
[att|=val]
[att^=val]
[att$=val]
[att*=val]

Which of them have you NEVER used?

I always had the feeling that there's rather too many of these attribute selectors, and that they were optimized for a use case that was cancelled a long time ago.

OK, URLs. But other than that?

ppk, 10 months ago to random

Oh wow, Safari even refuses to keyboard-focus on links that have a tabindex. I did not expect that.

ppk, 8 months ago to random

Nested at-scope rules are interesting.

ppk, 10 months ago to random

Actually, this deserves a wider audience.

Just now I read a toot[1] that says we shouldn't be so dependent on MDN, given the recent AI disaster. We should do our own documentation.

The problem is funding. How will writers get paid? People look away from this question because it's Not Done to talk about money. Which is bullshit we need to get rid of.

And remember: I used to maintain the precursor site to MDN + caniuse, mostly unpaid. So I know what I'm talking of.

1: https://front-end.social/@nachtfunke@indieweb.social/110649099731456418

ppk, 4 months ago to random

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, 10 months ago to random

Federated TEST requested of the old 300ms delay:

https://quirksmode.org/booktests/delay.html

Please stay on the page when the unbeforeunload dialog comes up, and please report the difference between 'touchend' and 'Unload'.

On my Samsung Android it's about 220ms.

I hope this works on the iPhone at all.

ppk, 10 months ago to random

Oh, the Dutch government just fell.

ppk, 10 months ago to random

The problem with Gimp is that it's in the uncanny valley for a former Photoshop user. It does everything nearly the same - except when it doesn't at random points.

ppk, 8 months ago to CSS

Once I come to the #css custom properties chapter ...

... which other CSS topics, outside of custom properties themselves, and the at-property rules, are vitally important for explaining them? Which topics should I treat before them in the book?

/cc @leaverou

ppk, 3 months ago to random

I need some good examples of relatively simple CSS and JavaScript functionalities that aren't supported by all browsers.

Last year this time the poster child was :has(), which was not supported by Firefox. I'm looking for something similar today.

ppk, 9 months ago to random

Who is the world's top expert on z-index and stacking contexts?

Intermediate experts won't do, I need the top one. Like, now ... ?

ppk, 9 months ago to random

What makes ::before and ::after special? So far I have:

• user cannot select them
• Not part of the DOM. do not appear in CSS or JS lists of children, so :nth-child() or element.childNodes does not find them
• cannot be used in functions such as :is() or :has()
• not for replaced elements BUT Chrome and Safari
• not reliably accessible to screen readers
• special syntax getComputedStyle

Anything else?

ppk, 1 year ago to webdev

Two thoughts about #css cascade layers:

1. Default layers (i.e. unlayered styles) have the highest priority. I think this is a design mistake because
   a) I'd like to slap a layer newstyles on to an old codebase that has higher priority, so I can write new CSS while allowing the old CSS to shine through in places I haven't covered yet.
   b) this makes cascade layers an all or nothing proposition: either you use them or not. And you can't use them if you support old browsers.

But ... (ctd)

ppk, 1 year ago to accessibility

#a11y #screenreaders

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

ppk, 9 months ago to random

"
If you know regular expressions, selectors can be somewhat compared to them. Their purpose and syntax are wildly different, but they share an expressive power that allows you to select very specific strings or HTML elements, and if you expand them too eagerly, they become a strand of incomprehensible spaghetti code that defies all attempts of future you or a developer who inherits your code base to make sense of them.
"

ppk, 8 months ago to random

IOS TEST requested:

1. Go to https://quirksmode.org/booktests/animations.html

2. Press Start Animation

3. Wait a second, then press Stop Animation !important

Does the animation stop immediately?

ppk, 6 months ago to random

A brief reaction to yesterday's #Dutch #elections where #Wilders's radical-right PVV became the largest party:

• The scale of his win was unexpected, even to Wilders himself. The polls had him at about 28/150 seats, he'll likely get 37.

1/?

ppk, 11 months ago to random

There's no way to make a background-image repeat only in the content-box, right? It will always overflow into the padding-box, right?

ppk, 9 months ago to CSS

So ... revise the z-index chapter of the #css book.

I need a collective name for "elements that obey their z-index"/"elements on which it makes sense to set z-index".

Most elements ignore their z-index, after all, and when I explain in which situations that happens and does not happen it's useful to have a name.

I thought the name was "stacking item", but it appears that I made up that name, then forgot I made it up.

Suggestions?