Veröffentlicht am
von
Article note: #toppi! (Jetzt wünsche ich mir nur endlich mal nen Fork, der diese Features hat + weiterentwickelt ... Einfach nur temporär selber frickeln, scheint mir nicht so optimal ...)
Ab sofort ist unser Tool für Umfragen und Termine online! Die Software läuft auf einem unserer eigenen Server und speichert nur, was Sie selbst eintragen. Gern ausprobieren!

Veröffentlicht am
von
Article note: #ju-bel!
Berlin (dpo) - Nach dem Geständnis des Neonazis Stephan E., wonach er den Mord am hessischen CDU-Politiker Walter Lübcke allein und ohne jede Hilfe geplant und begangen haben soll, atmet man im Innenministerium auf: Offenbar handelte es sich bei dem 45-jährigen aus Kassel um Deutschlands einzigen gewaltbereiten Nazi.
mehr...

Veröffentlicht am
von
Article note: #nice

Using :hover to display additional information or elements is a very useful technique but a big drawback to using the hover pseudo-class is that they are usually not accessibility-friendly. Not everyone uses a mouse and some users have visual impairments, so they rely on screen readers or the keyboard — two functionality that don’t technically hover.

Luckily the CSS spec gives us a gift to pair with :hover: :focus-within. With :focus-within developers can modify styles of elements when an element or its parent has keyboard focus!

Consider the following HTML template with default CSS styling:

<ul id="sports">
  <li>
    <label>
      <input type="checkbox" name="sports[]">
      Soccer
      <button class="remove">Remove</button>
    </label>
    <!-- ... -->
  </li>
</ul>

#sports .remove {
  display: none;
}

#sports li:hover .remove {
  display: inline-block;
}

With the code above, hovering over a list item would show the “remove” button. That’s great for mouse users but totally useless for keyboard users. Let’s fix that using :focus-within:

#sports .remove {
  display: none;
}

#sports li:hover .remove,
#sports li:focus-within .remove {
  display: inline-block;
}

Once focus hits the checkbox, the focus is technically within the list item and thus we can employ :focus-within to show the “remove” button.

Accessibility is something that gets considered last but shouldn’t be an afterthought; in a way, :focus-within is a useful ally even when accessibility was an afterthought. Even when considering accessibility up front, :focus-within should be in every developer’s toolbox!

The post CSS :focus-within appeared first on David Walsh Blog.