Don't Comma-separate :focus-within If You Need Deep Browser Support

Ich mag :focus-within wirklich. Es ist ein super nützlicher Selektor, der es Ihnen ermöglicht, im Wesentlichen ein Elternelement auszuwählen, wenn eines seiner Kinder fokussiert ist.

Nehmen wir an, Sie möchten zusätzliche Inhalte anzeigen, wenn ein <div> mit der Maus überfahren wird...

div:hover .extra-stuff {
  /* reveal it */
}

Das ist nicht besonders tastaturfreundlich. Aber wenn etwas in .extra-stuff sowieso tabulatorfähig ist (was bedeutet, dass es fokussiert werden kann), dann könnten Sie es so schreiben, um es etwas zugänglicher zu machen

div:hover .extra-stuff,
div:focus-within .extra-stuff {
  /* reveal it */
}

Das ist schön, aber es verursacht ein kniffliges Problem.

Browser ignorieren ganze Selektoren, wenn sie keinen Teil davon verstehen. Wenn Sie also mit einem Browser zu tun haben, der :focus-within nicht unterstützt, würde er das obige CSS-Beispiel ignorieren, was bedeutet, dass Sie *auch* den :hover-Status verloren haben.

Stattdessen

div:hover .extra-stuff {
  /* reveal it */
}
div:focus-within .extra-stuff {
  /* reveal it */
}

Das ist sicherer. Aber es ist repetitiv. Wenn Sie einen Präprozessor wie Sass haben...

@mixin reveal {
  .extra-stuff {
     transform: translateY(0);
  }
}
div:hover {
  @include reveal;
}
div:focus-within {
  @include reveal;
}

Siehe den Pen
Mixin für :focus-within ohne Kommas von Chris Coyier (@chriscoyier)
auf CodePen.

Ich würde sagen, das ist ein ziemlich guter Anwendungsfall für native CSS-Mixins.

Kommentare

Jon

# 24. Juli 2019

Wieder brillant, Chris!

Ich dachte nur, Sie würden gerne wissen, dass die Anzeige auf dem eingebetteten CodePen nicht funktioniert, aber beim Betrachten auf CodePen.io einwandfrei funktioniert!

Glenn

# 24. Juli 2019

Nein, das ist ein ziemlich guter Fall dafür, dass Browser keine ganzen Regelwerke ignorieren, weil sie einen Selektor in der Liste der durch Kommas getrennten Selektoren nicht verstehen.

Chris Coyier

Permalink zum Kommentar# 25. Juli 2019

Haben Sie ein klares Verständnis dafür, was dies für das Web im Großen und Ganzen bedeuten würde, wenn dieses Verhalten geändert würde? Ich weiß, dass Browser damit sehr vorsichtig sind, und ich vermute, dass die negativen Folgen ziemlich groß wären (Browser-Hacks und dergleichen, die leider bereits in Gebrauch sind, würden dadurch kaputt gehen).

Vadim

# 24. Juli 2019

So dumm, wie sie ganze Regelwerke auf diese Weise ignorieren

Abanoub

# 25. Juli 2019

Ich benutze CSS seit einem Jahr und wusste nicht, dass Browser ganze Selektoren ignorieren, wenn sie Teile davon nicht verstehen können. Vielen Dank.

Loren Helgeson

# 28. Juli 2019

Interessant, aber kann ich nicht das gleiche Ergebnis erzielen, indem ich einfach :focus verwende? Oder habe ich etwas übersehen?

Ich verwende in meinen Stylesheets immer :focus für alles mit einer :hover-Eigenschaft, und ich habe erst kürzlich von :focus-within gehört.

Michael Ball

# 29. Juli 2019

Ja, das mache ich seit ein paar Jahren und es ist eine ausgezeichnete Technik. Ich bevorzuge es jedoch, die Verwendung des Mixins zu "invertieren", damit ich es in meiner Selektordefinition einfügen kann. Dies verbirgt die Implementierung teilweise, sodass andere Entwickler nicht daran denken müssen, den Selektor in 2 Blöcke aufzuteilen.

@mixin hover-focus-within {
  &:hover {
    @content
  }

  &:focus-within {
    @content
  }
}

Um die Frage zu beantworten, warum dieser Selektor: er wird angewendet, wenn die Kinder ebenfalls den Fokus haben, was bei Tabellenzeilen, Diagrammen und vielen anderen komplexen Aktionen nützlich sein kann. https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

Jakob E

# 18. August 2019

Eine kleine Anmerkung zu Sass-Mixins

Sie können Mixins innerhalb von Selektoren verschachteln, um Namenskonflikte im globalen Geltungsbereich zu vermeiden

.component-a  {
    @mixin content {
        color: red   
    }    
    &:hover { @include content }
    &:focus-within { @include content }
}

.component-b  {
    @mixin content {
        color: blue
    }    
    &:hover { @include content }
    &:focus-within { @include content }
}

Ein Hauptproblem dieser Lösung ist, dass *Sie keine Mixins innerhalb von Mixins verschachteln können*

@mixin component-a {
    .component-a {
        @mixin content {  }  // not allowed
   }
}

Um dies zu lösen, können wir ein Hilfs-Mixin erstellen, um Selektoren zu entgruppieren (Elternselektoren)

//  ––––––––––––––––––––––
//  Ungroup mixin
//  ––––––––––––––––––––––
@mixin ungroup {
    @each $selector in & { 
        @at-root #{$selector}{ @content } 
    } 
}

//  ––––––––––––––––––––––
//  Use example
//  ––––––––––––––––––––––

//  component a
@mixin component-a {
    .component-a {
        &:hover, 
        &:focus-within {
            @include ungroup {
                color: red; 
            }
        } 
    }
}

//  component b
@mixin component-b {
    .component-b {
        &:hover, 
        &:focus-within {
            @include ungroup {
                color: blue; 
            }
        } 
    }
}

//  assemble
@include component-a;
@include component-b;

Vorschläge und Kommentare sind willkommen :)

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.