1. 36
  1. 5

    The + selector is one I found late, which is a shame because it’s very useful. Especially when trying to style prose.

    1. 5

      I remember hearing about it originally in the context of a “lobotomized owl” selector: * + *

      Still brings a smile to my face. :^]

    2. 3

      I’ve been doing this for years and I love it. $WORK prefers to just override styling and I find that lazy af. But hey, I’m not gonna argue with a rich corporation.

      The most common place I use :not is styling for different viewports. I’m on my phone in bed but I believe the source of one of my recent sites is a good example (https://neuenet.com).

      1. 2

        Indeed, using not() is the best solution in most cases: succinct and expresses explictly what the original intent is.

        The only issue is that, as of 2021-03, not() is not yet supported by all “minor but not totally irrelevant” browsers. In particular, it is not supported by IE11 and Samsung Internet. [1]

        [1] https://caniuse.com/css-not-sel-list

        1. 10

          I think what you’re looking for is this: https://caniuse.com/mdn-css_selectors_not

          Got suspicious when I noticed chrome only supported that since January of this year, turns out that’s for having multiple selectors inside a single :not (like :not(.a,.b,.c) instead of :not(a):not(b):not(c)). The one you probably want is supported by all browsers in that list that aren’t extremely outdated (even IE 9 supports it!)

          1. 4

            To put some color on that: Not even Microsoft supports IE11, and “Samsung Internet” is supposed to be based on chromium, so if it doesn’t support a ten year old feature, that either means they removed something useful or have cut before :not was introduced so I think you’re doing those poor bastards a favor by not supporting their bad lifestyle decisions, and I hesitate to even consider what other problems those users have.

            1. 8

              Two clarifications:

              1. All browsers support CSS3 :not().

              Practically any browser out there has basic support for CSS3 :not(): https://caniuse.com/css-sel3. https://caniuse.com/css-not-sel-list is about support for full fledged CSS4 :not().

              2. Yes, these are minority browsers, but ~15% of the global users. The most disadvantaged 15%.

              Agreed that these are minority browsers. Unless you are targeting the whole world population (like Facebook or Twitter do) one should not care too much about them.

              My only concern is that these minority browsers still account for ~15% of the global Web users (says caniuse). From my experience, these users are the most disadvantaged, and often not in a position of control: library patrons, people stuck with older mobile phones, employers in budget-tight SMEs. The kind of users that will not make you rich, but that somehow I feel obliged to support on ethical grounds.

              That said, most of the times there are CSS polyfills that one can use to support such outdated browsers, so practically speaking, this is not a big issue.

              1. 9

                More javascript so it looks a little prettier? No, that’s the opposite of what we should do with those bottom-of-the-barrel browsers with underpowered CPUs and low resolution screens.

                The best way to support their users is to give them usable server-side rendered HTML. They will not care is everything doesn’t look pixel-perfect, but they will care if they have to wait a minute or two just to read some text because you are using React for a static page.