Post pobrano z: Is “is” Useful?

God I’m funny.

Anytime we have fairly repetitive selectors that have a common parent, it’s probably a place we can use the :is() pseudo-selector.

Holger Bartel demonstrates like this:

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
  font-size: 20px;
}

Becomes:

:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}

Adam Argyle demonstrated like this:

#CSS

:is() selector 🎉
the successor to :any() and :matches()

sneak peak into our talk, here's a neat gif I made with XD showing what the :is() selector syntax can do. be excited for Chrome Dev Summit y'all!https://t.co/0r2CcUx9Hv pic.twitter.com/wSuGOsDLvZ

— Adam Argyle (@argyleink) November 7, 2019

MDN has an extra dramatic one:

ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}

It’s less code and easier to reason.

Kezz Bracey notes that pairing it with :not() can be nice as well:

:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 400;
}

Browser support is just starting to get there and polyfilling is hard, so we aren’t at day-to-day no-brainer use levels quite yet. I’d bet it’s not too far away.

The post Is “is” Useful? appeared first on CSS-Tricks.

Post pobrano z: Gotta Select’em All

I suspect it is not highly known that CSS can control how text is selected. You can do user-select: none; to prevent some text from being selected. That’s probably not terribly good UX in general, but perhaps you use some period (.) characters as decoration or something, I could see preventing those from being selected.

The exact opposite is user-select: all; which forces all the text to be selected in an element. Again, probably somewhat iffy UX. Forcing someone to select all the text is fairly rare on the web and to actively prevent someone from selecting a part of it feels like it’s trying too hard to be helpful to the point that it’s actually hurting.

Anyway, here’s Dag Frode Solberg with more detail.

I forked his demo here to show off a simple scenario where click-to-select might make some level of sense:

See the Pen
css/user-select/4 by Chris Coyier (@chriscoyier)
on CodePen.

If you wanted to implement a situation where you click once to highlight all then stop interfering, you could do that in JavaScript with an click handler than removes itself after the first click.

const cells = document.querySelectorAll("td");

function highlight(event) {
  window.getSelection()
    .selectAllChildren(
      event.target
    );
  event.target.removeEventListener("click", highlight);
}

cells.forEach(cell => {
  cell.addEventListener("click", highlight);
});

Direct Link to Article — Permalink

The post Gotta Select’em All appeared first on CSS-Tricks.

Post pobrano z: Microbrowsers are Everywhere

The word „microbrowser” clearly got my attention. Never heard that before. Colin Bendell defines them as the little parts of other software that do HTTP requests to a URL to generate a preview. Like the little URL preview in iOS messages, WhatsApp, or Slack.

I’m a tiny bit skeptical of the name, because what’s happening is the software making that HTTP request and parsing out a little data to use however it will. I’m not sure I’d call that a browser of any kind, but I take the point.

I agree that these things are mega important.

[…] the real gold for marketers is from word-of-mouth discussions. Those conversations with your friends when you recommend a TV show, a brand of clothing, or share a news report. This is the most valuable kind of marketing.

It reminds me of how tools, like Yoast’s SEO plugin for WordPress, help with managing the look/content of social preview cards.

I could see value in this same kind thing where it shows Slack and WhatsApp and all those tools, even if it’s harder to control.

Direct Link to Article — Permalink

The post Microbrowsers are Everywhere appeared first on CSS-Tricks.