nav li:first-of-type u. nav li:last-of-type

[Gustav]

Ich habe mit den Hilfestellungen hier aus dem Forum nun einige Zeit rumprobiert, bekomme das Menu aber nicht so aufgestellt, wie beabsichtigt. Ich füge hier zur Verdeutlichung zwei Screenshots im Schmal- und Breitmodus mit an, wie es schließlich aussehen soll.

Gegenüber der selfhtml-Vorlage, die mein Ausgangspunkt war, möchte ich zum einen, im nav li:first-of-type ein schwarzes home-Bild einbinden, dass auf der home-Seite durch ein graues home-Bild ersetzt wird. Ich dachte, das mit nav li:first-of-type[aria-current="page"] umsetzen zu können. Auch ein paar andere Wege habe ich ausprobiert, finde aber noch keine Lösung. Habt ihr vielleicht Anregungen?

Und zum anderen bekomme ich mein Language-Icon im nav li:last-of-type nicht positioniert. Verstehe ich dabei richtig, dass allein durch die Einbidnung der Sprachen in einem summary Element die jeweiligen Pfeile eingebettet sind? Wie aber kann ich mein Language-Icon (hier: Globus) zum jeweiligen Pfeil positionieren? Auch die Möglichkeiten aus flexboxfroggy habe ich reichlich ausprobiert, finde aber auch hier noch nicht den richtigen Zugriff. Hat jemand von Euch eine Hilfestellung?

Zu meiner eigenen Orientierung habe ich auf der Testseite http://1.eyes2k.com übrigens die <a> Elemente mit einem grünen outline und die <li> Elemente mit einem blauen outline kenntlich gemacht.

Schöne Grüße, Gustav

[djr]

Das home-Icon ist aktuell als Hintergrund des li definiert.
aria-current="page" ist ein Attribut von a, welches Kind von li ist.
Du kannst mit CSS nur in die Tiefe selektieren, daher wird Dein Vorhaben so nicht möglich sein.

Lösung: Das Home-Icon als Hintergrund von a definieren.

[djr]

Die eleganteste Lösung allerdings wäre, das Icon als SVG direkt ins a zu schreiben und via CSS zu färben.

<a href="">
  <svg viewBox="0 0 2 2">
    <circle cx="1" cy="1" r="1" />
  </svg> 
  <span>Home</span>
</a>

@namespace url('http://www.w3.org/1999/xhtml');
@namespace svg url('http://www.w3.org/2000/svg');

svg|svg {
  fill: red;
}

a[aria-current="page"] svg|svg {
  fill: blue;
}

a:hover svg|svg {
  fill: green;
}

[Rolf B]

Hallo djr,

coole Idee. Ich hab grad mal probiert, es funktioniert auch ohne Namespacing. Haben die Namespaces in bestimmten Umgebungen eine Notwendigkeit?

Rolf

[djr]

Haben die Namespaces in bestimmten Umgebungen eine Notwendigkeit?

Es ist "Geschmackssache" ob man mit Namespaces in CSS arbeiten will. Ich rate Vor- und Nachteile abzuwägen.

---

Ein Beispiel:
Ergänze im obigem Code

a > * {
  border: 2px solid orange;
}

Vergleiche nun das Ergebnis mit / ohne Namespaces.

---

Richtig interessant wird ein CSS-Namespace für in-HTML-SVG bei CSS-Resets unter Nutzung des all-Property.

.module {
  all: revert;
}
.module * {
  all: unset;
}

---

Aber nicht nur der Universalselektor, sondern alle Selektoren spielen eine Rolle. Das a-Element kommt sowohl in HTML, als auch in SVG vor. Auch Attribute, IDs oder Klassennamen können sowohl im HTML, als auch im SVG-Abschnitt des Dokumentes vorkommen. Um die Selektorspezifität gering zu halten bzw. Style-Überschreibungen zu vermeiden, können sich Namespaces lohnen.

a {
  outline: 2px solid red;
}

svg a {
  outline: none;
}

@namespace url('http://www.w3.org/1999/xhtml');
@namespace svg url('http://www.w3.org/2000/svg');

a {
  outline: 2px solid red;
}

[Rolf B]

Hallo Gustav,

dein Home-Icon sieht so aus:

<li>
   <a id="homeS" aria-current="page"></a>
</li>

Das Home-Bild ist Hintergrundbild des li-Elements. Die Farbe Grau setzt Du für das a Element. Das sind zwei Gründe, warum die Farbe nicht wirkt.

• auf einem Kind-Element gesetzt statt auf dem Element selbst
• ein background-image wird von color nicht mal peripher tangiert.

Das aria-current Attribut bleibt sinnvollerweise auf dem a Element stehen. Aber ich schlage Dir folgende Änderungen vor:

• Verschiebe das Attribut id="homeS" vom a auf's li Element. Dadurch kannst Du das li mit #homeS ansprechen statt mit li:first-of-type, das ist robuster falls Du das Home-Menü anderswo haben willst. Das würde ich analog auch mit dem Sprachmenü machen.
• Lasse das Padding auf den nav li Elementen ganz weg und verwende dort padding:0. Passend dazu gib den nav a Elementen width:100%; height:100%, damit sie ihr li Element vollständig ausfüllen.
• Damit das li für das Home-Menü breiter wird (z.B. 5em), mach es so wie im Sprachmenü. Verwende statt flex-grow:0 zum Beispiel dies:

#homeS { flex: 0 0 5em; }

• Setze das Home-Bild als Hintergrundbild des a Elements, nicht des li Elements. Aber eigentlich... dieses Bild ist keine Deko, sondern essenzieller Teil der Seite. Man könnte hier auch ein <img> Element mit aussagekräftigem alt-Text (alt="Startseite") verwenden.

Wie macht man nun Häuschen und Text der aktiven Seite grau? Den Text bekommt man mit color:gray hin. Für das Bild gibt es mehrere Möglichkeiten.

1. stelle ein zweites Bild bereit, das grau ist
2. erstelle gestapelte Hintergründe. Zuunterst das schwarze Häuschen, darüber eine Ebene mit 50% transparentem Weiß. Das geht elegant mit einem Lineargradienten (linear-gradient(0, #fff8, #fff8)). Dadurch wird das schwarze Haus grau. Hintergrundbilder stapelt man, indem man sie per Komma auflistet, das oberste zuerst:

nav a[aria-current=page] {
   background-image: linear-gradient(0, #fff8, #fff8), url(/img/haus.png);
}

3. oder setze für das a Element der aktiven Seite opacity=0.5;. Dadurch brauchst Du auch für die Texte kein color:gray mehr, weil die Teiltransparenz alles schwarze grau erscheinen lässt. Aber Du könntest Dir mit teiltransparenten Menüs andere Probleme einfangen. Es sähe jedenfalls so aus:

nav a[aria-current=page] {
   opacity:0.5;
}

Damit wird das Element für die aktuelle Seite halb durchsichtig. Wenn das Häuschen ein <img> im a Element ist, oder Hintergrund des a Elements, erscheint es dadurch grau statt schwarz. Der Effekt ist, dass sowohl Häuschen als auch Text statt schwarz nun grau erscheinen. Wenn Dir die Opacity andere Probleme macht (teiltransparente Menüs lassen ggf. etwas durchscheinen, was sie nicht sollen). Meine Empfehlung wäre die teiltransparente Weißschicht.

Nun zum Sprachmenü.

• align-items auf dem Summary-Element ist sinnlos und kann weg. Diese Eigenschaft gilt nur für Elemente mit display:flex oder grid.
• details und summay sind Blockelemente, d.h. sie breiten sich auf 100% Breite aus, aber die Höhe ist ein Problem. Du hast keinen direkten Inhalt, darum solltest Du für beide height:100% angeben, damit das li Elternelement vertikal ausgefüllt wird.
• dein globeB.svg ist großer Mist. Dieses SVG ist lediglich ein 30x30 Container für ein PNG, das als Image URL gespeichert ist. Und das SVG setzt keine Viewbox, deshalb ist es 300px breit und reagiert ungnädig auf Prozentangaben im background-position. Nimm das SVG vom Globe-Icon aus der Wikipedia, das ist gemeinfrei, besteht aus Pfaden und ist 355 Bytes statt 5346 Bytes groß.

Das musst Du nun richtig positionieren. Ich habe in den Entwicklertools experimentiert.

nav summary {
    background: url(../img/globeB.svg) 1.5em 0.2em no-repeat;
    height: 100%;
    padding: 0 0 0 0.5em;
    outline: .8px solid transparent;
    text-align: left;
    line-height: 2em;
}

Dabei ist: padding-left: Linke Position des Details-Pfeils
line-height: Vertikale Position des Details-Pfeils
background: Platzierung des SVG - dein SVG. Da genügt die Angabe einer Position, aber hier funktionieren keine Prozente, weil dein SVG keine viewbox hat.

Das Wikipedia-SVG hat auch keine Viewbox, es bringt aber eine Größe von 420px mit. Darum muss man es skalieren, wenn man es verwendet. Die Skalierung wird mit einem Schrägstrich hinter die Position geschrieben.

nav summary {
    background: url(globe_icon.svg) calc(50% - 1.5em) 0.2em / auto 80% no-repeat;
    ...
}

Damit funktioniert es in der Breitansicht eigentlich ganz gut. Was steht da eigentlich? background ist eine Kombi-Eigenschaft, und ich setze mit dem, was da oben steht, 4 Einzel-Eigenschaften.

   background-image: url(...);  
   background-position: calc(50% - 1.5em) 0.2em;  
   background-size: auto 80%;  
   background-repeat: no-repeat;  

Bei Position und Size steht erst die x, dann die y Komponente. Und die X-Position berechne ich: 50% - 1.5em, also den linken Rand des Bildes erstmal genau in die Boxmitte, und dann 1.5em nach links. Die Spaces um das Minus sind wichtig, sonst funktioniert das nicht. Die Formel passt für Schmal- und Breitansicht ganz gut.

Die Schmalansicht ist aber trotzdem noch reichlich fritte. Ich würde display:flex nur in der Breitansicht setzen. Da musst Du übrigens aufpassen, du setzt display:flex für das nav li an 2 Stellen (Zeile 22 und 84). Ich würde es da an beiden Stellen entfernen und nur in Zeile 94 verwenden (nav li für die breite Ansicht). In der Schmalansicht steht ja eh alles untereinander, und die flex-grow/shrink/basis Angaben aus der Breitansicht stören hier nur. Für eine saubere Menüansicht sollten die li eine height-Angabe bekommen (z.B. 2em), und im Sprachmenü musst Du (im Media Query-Teil) das padding-left anpassen, so etwa auf 40%.

Good Luck 😀
Rolf

[Gustav]

Hallo Rolf,

erst einmal vielen Dank für deine umfangreiche Antwort.

Nachdem ich die verschiedenen Varianten durchprobiert habe, bin ich mit deinen konkreten Angeboten nach meinem Eindruck gut voran gekommen. Ich habe sowohl das Language- als auch das Home-Icon auf das li-Element verschoben. Nun sieht es insgesamt schon wieder aufgeräumt aus. http://1.eyes2k.com
Und ich gehe übrigens davon aus, dass du nicht nav li sondern nav ul meintest, denn dort waren bislang die display:flex Einträge. Ich habe an den Stellen jedenfalls auch die übrigen Definitionen für nav ul herausgenommen.

Die beiden Varianten zur unterschiedlichen Darstellung des home-Icons habe ich ausprobiert und dazu folgende Nachfragen:

1. Wenn das schwarze Icon home und das graue Icon homeS benannt sind, lautet die Stapelung dann: nav a[aria-current=page] { background-image: linear-gradient(0, #fff8, #fff8), url(/img/homeS.png,/img/home.png);}

2. Den Ansatz mit opacity habe ich probiert, aber noch nicht hinbekommen. Kann es sein, dass das nun auch nicht mehr funktionieren kann, da ich deinem Vorschlag gefolgt bin, das home-Icon auf das li Element zu verschieben?

@djr Die Variante von djr zur Einbindung des home.png habe ich auch probiert aber leider nicht hinbekommen.

Feine Grüße, Gustav

[djr]

Die Variante von djr zur Einbindung des home.png habe ich auch probiert aber leider nicht hinbekommen.

Auf Basis des aktuellen HTML Deiner Site, die obige Lösung als Code:

li[id="home"] > a {
  background-image: url('/img/home.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 1.2em;
}

li[id="home"] > a[aria-current="page"] {
  background-image: url('/img/homeS.png');
}

Tipp: [id="home"] statt #home ergibt eine geringere Spezifität.

Edit Rolf B: Korrektur eingepflegt

[Rolf B]

Hallo djr,

ich habe die URL() korrigiert und dein Korrekturposting gelöscht. Wenn Du Dich registrierst, solltest Du Beiträge auch für eine gewisse Zeit selbst editieren können.

Meinst Du, dass man die Spezifishity hier gezielt senken sollte? Welches Problem siehst Du im #home Selektor?

Rolf

[djr]

Danke!

---

Die Spezifität gering zu halten, ist immer gut 😉.

Zudem haben IDs bei mir oft einen Präfix anhand dem sie gruppiert sind. Ist dem so, kann leicht mit dem Attributselektor |= danach selektiert werden:

li[id|="navitem"] > a {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 1.2em;
}

li[id="navitem-home"] > a {
  background-image: url('/img/home.png');
}

li[id="navitem-home"] > a[aria-current="page"] {
  background-image: url('/img/homeS.png');
}

li[id="navitem-language"] > a {
  background-image: url('/img/globe.png');
}

[Rolf B]

Hallo Gustav,

(1) Opacity

Du schreibst:

da ich deinem Vorschlag gefolgt bin, das home-Icon auf das li Element zu verschieben?

WTF? Das Icon war bereits Hintergrund des li Elements. Mein Vorschlag war, es auf das a Element zu verschieben. Dann klappt das auch mit opacity:0.5 auf dem a Element.

Wenn das Icon Hintergrundbild des li Elements ist, hast Du auch ein anderes Problem. Die aria-current=page Angabe ist auf dem a Element, und es gibt keine Möglichkeit im CSS, ein Element basierend auf Eigenschaften seiner Kinder zu stylen. Wenn das Hintergrundbild auf dem a Element liegt, dann geht es.

(2) Stapelei

Du schreibst:

nav a[aria-current=page] {
   background-image: linear-gradient(0, #fff8, #fff8), 
                     url(/img/homeS.png,/img/home.png);
}

dazu ein mehrfaches Nein.

(1) Verwende nur eine der beiden Techniken. Entweder zwei Bilder, oder ein Bild, dass Du mit einer teiltransparenten Weißebene aufhellst. Es ist wenig sinnvoll, eine separate Datei mit einem grauen Häuschen bereitzustellen, und das dann über eine Weißebene aufzuhellen.

(2) Innerhalb einer URL() Funktion kann man nur ein Bild angeben. Wenn Du zwei Bilddateien stapeln willst, dann so: url(bild1.png), url(bild2.png). Das funktioniert natürlich nur dann, wenn bild1.png transparente oder teiltransparente Bereiche hat, oder wenn es kleiner ist als bild2.png. Andernfalls wird bild2 einfach nur überdeckt.

Egal welche Technik Du verwendest, Du brauchst eine "normale" CSS-Regel und eine für aria-current=page, die den Background verändert.

Mit einem zweiten Bild:

#home a {
    background: url(../img/home.png) no-repeat center/auto 72%;
}
#home a[aria-current=page] {
    /* background-image ersetzen reicht */
    background-image: url(../img/homeS.png);
}

Mit einer Weißebene:

#home a {
    background: url(../img/home.png) no-repeat center/auto 72%;
}
#home a[aria-current=page] {
    background: linear-gradient(0, #fff8 0%, #fff8 100%),
                url(../img/home.png) no-repeat center/auto 72%;
}

Beachte auch, wie ich die background-size in der Sammel-Eigenschaft background unterbringen kann: position / size. Der Schrägstrich ist hier relevanter Teil der Syntax.

Und wenn die position center center ist, kann man auch einfach center schreiben.

Rolf

[Gustav]

Hallo Rolf,

offenbar habe ich den Satz

Verschiebe das Attribut id="homeS" vom a auf's li Element.

missgedeutet. Ich habe es jetzt mit zwei Bildern umgesetzt und es funktioniert bei mir aber auf beiden von dir vorgeschlagenen Wegen.

Allerdings hat sich im Schmalmodus der Home-Menu-Punkt gegenüber den übrigen nun deutlich verschmälert. Habe ich da irgend etwas falsch gemacht?

Vielen Dank schon mal, Gustav

@djr

Die Variante von dir, djr habe ich übrigens auch ausprobiert, funktionierte bei mir aber leider nicht.

[Rolf B]

Hallo Gustav,

das mit den Höhen ist etwas Gefummel, und ich bin damit auch noch nicht so richtig zufrieden.

Dein Home-Menü ist im Schmalmodus zu klein, weil kein Inhalt da ist und die Höhe nur von den Paddings bestimmt wird. Hier fehlt Dir ohnehin noch die Bedienbarkeit; ein nicht sehender Anwender erfährt nicht, wozu dieser Menüpunkt dient. Hier könnte man ein &nbsp; einbauen, damit die Höhe passt, und einen visuell versteckten span: <span>Zur Startseite</span>. Das visuelle Verstecken kannst Du im CSS mit font-size:0 erreichen.

Ähnliches gehört auch zum Sprachmenü - NUR: wie man ein zugängliches Sprachmenü baut, das ist eine komplexe Kunst. Hier etwas Lektüre dazu.

Rolf

[Gustav]

Hallo Rolf,

wäre dann

nav li:first-of-type span { font-size:0; }

im CSS zielführend und auch erlaubt?

Herzlichen Dank noch einmal für deine sämtlichen Hilfestellungen,

Gustav

[Rolf B]

Hallo Gustav,

zielführend? erlaubt?

Erlaubt sicherlich, aber zielführend? Ich habe nochmal geschaut, was Gunnar so zum Thema visuelles Versteckspiel geschrieben hat, und habe auch nach font-size:0 gegoogelt.

Ergebnis: Manche Browser erlauben es, eine Mindestschriftgröße zu setzen. font-size:0 würde damit ignoriert.

Der von Gunnar verlinkte Vorschlag ist:

.visually-hidden {
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

Da wird aus einigen Kanonen auf einen einsamen Spatzen geschossen, aber vermutlich trifft jede Kanone einen anderen potenziellen Fluchtweg des Vögelchens. Beispielsweise white-space: nowrap. Renée Beach erzählt, dass ein Screenreader den visuell versteckten Text "show more reactions" als "showmorereactions" zusammennuschelte. Als Ursache dafür stellte sich width:1px heraus, das zu einem Zeilenumbruch an den Leerstellen führte, und der Screenreader ignorierte Zeilenumbrüche, als wären sie nicht da. Das nowrap behob das Problem.

Also: font-size - besser ist die oben gezeigte Definition. Setze sie in dein CSS und gib dem Span die Klasse visually-hidden.

Rolf

[JürgenB]

Hallo Rolf,

Der von Gunnar verlinkte Vorschlag ist:

.visually-hidden {
  clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

in den Tutorials zur Zugänglichen Navigation und zum Tabellensortierer habe ich noch einige Kanonen mehr und die auch noch nachdrücklicher, aber dafür lasse ich IE 6/7 leben:

.visually-hidden { 
	position: absolute !important; 
	clip: rect(1px, 1px, 1px, 1px) !important; 
	padding: 0 !important; 
	border: 0 !important; 
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden !important; 
	white-space: nowrap !important; 
} 

Im konkreten Fall kann man da bestimmt einiges weglassen.

Gruß
Jürgen

[Gustav]

Hallo Rolf, hallo Jürgen

ich muss noch mal was nachfragen. Ich habe in meinem konkreten Fall jetzt einiges durchprobiert:

nav li:first-of-type span .visually-hidden { clip:...
nav a span .visually-hidden { clip:...
nav span .visually-hidden { clip:...
#home a span .visually-hidden { clip:...

...aber der Text im span will einfach nicht verschwinden 😀 http;//1.eyes2k.com

Habt ihr eine Idee?

Schöne Grüße zum Abend, Gustav

[Rolf B]

Hallo Gustav,

ja. Zwei. Warum schreibe ich mir eigentlich den /[RW]olf/, wenn Du es nicht liest? Oder nur die Hälfte davon?

style.css Zeile 34:

nav span .visually-hidden { ... }

(1) Für welche Elemente gilt das? Lies nach: CSS Selektoren und Kombinatoren

(2) Wo in deinem HTML wird diese Klasse gesetzt?

Rolf

[Gustav]

Hallo Rolf,

ich bin leider noch zu keinem positiven Ergebnis gekommen, deshalb möchte ich dir gern noch auf deine Fragen antworten.

nav span .visually-hidden { ... }

(1) Für welche Elemente gilt das? Lies nach: CSS Selektoren und Kombinatoren

Nach meiner Vorstellung und dem, was ich im wiki gelesen habe, sollte das für alle span Elemente innerhalb der gesamten Navigation gelten.

(2) Wo in deinem HTML wird diese Klasse gesetzt?

Da ich viel ausprobiert habe und nicht alle Zwischenstufen abspeicher, weiss ich nicht auf welchem Stand du gestern Abend Einblick genommen hast. Nach meinen weiteren Recherchen würde ich auf heutigem Stand sagen, dass im html der span im a Element eingesetzt sein sollte.

Aber was ich bisher im CSS auch ausprobiert habe, der Text innerhalb des span verschwindet nicht.

Wo ist mein Denkfehler?

Gustav

[JürgenB]

Hallo Gustav,

nav span .visually-hidden { ... }

(1) Für welche Elemente gilt das? Lies nach: CSS Selektoren und Kombinatoren

Nach meiner Vorstellung und dem, was ich im wiki gelesen habe, sollte das für alle span Elemente innerhalb der gesamten Navigation gelten.

nicht ganz: das gilt für alle span Elemente innerhalb der gesamten Navigation, die der Klasse visually-hidden angehören.

Gruß
Jürgen

[MudGuard]

Hi,

nav span .visually-hidden { ... }

Nach meiner Vorstellung und dem, was ich im wiki gelesen habe, sollte das für alle span Elemente innerhalb der gesamten Navigation gelten.

nicht ganz: das gilt für alle span Elemente innerhalb der gesamten Navigation, die der Klasse visually-hidden angehören.

nicht ganz: es gilt für alle Elemente, die innerhalb eines span innerhalb eines nav liegen, und der Klasse visually-hidden angehören.

Zwischen span und .visually-hidden ist so wie zwischen nav und span ein Leerzeichen …

cu,
Andreas a/k/a MudGuard

[JürgenB]

Hallo Andreas,

👍

Gruß
Jürgen

[Gustav]

und der Klasse visually-hidden angehören.

Mit dem kleinen Wort 'und' hat's bei mir klick gemacht.

HTML

<span class="visually-hidden">home</span>

CSS

.visually-hidden { clip: rect(1px 1px 1px 1px); /* IE 6/7 */ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

Danke, Gustav

[Rolf B]

Hallo Gustav,

der Unterschied zwischen

nav span .visually-hidden

und

nav span.visually-hidden

ist Dir dabei klargeworden?

Rolf

[Gunnar Bittersmann]

@@Rolf B

nav span.visually-hidden

ist Dir dabei klargeworden?

Ist auch allen hier klar, dass auch dieser Selektor völliger Quatsch ist?

Die Regel soll für alle visuell versteckten Elemente gelten, nicht nur für jene, die innerhalb eines span innerhalb eines nav liegen.

😷 LLAP

[Rolf B]

Hallo JürgenB,

da muss ich Gustav dann wohl Abbitte leisten. Wenn Du auch die Leerstelle übersiehst...

Rolf

[JürgenB]

Hallo Rolf,

auf die Leerstelle habe ich garnicht geachtet. Nach der Frage von Gustav war ich mir nicht sicher, ob die Klasse visually-hidden überhaupt gesetzt war.

Ich würde in diesem Fall aber auch Gunnars Rat folgen, und die Regel auf alle visuell versteckten Elemente anwenden.

Gruß
Jürgen

PS Ich werde das im Tutorial ändern. Meine Sorge, mit der „globalen“ Regel etwas zu überschreiben, ist bei so etwas zentralem wie einer Navigation nicht nötig.

[Gustav]

Hallo Rolf,

ich kann dazu beitragen, dass es bei mir mit

nav span .visually-hidden { ...

nicht funktioniert. Es funktioniert mit

.visually-hidden { ...

Feine Grüße, Gustav

[Tabellenkalk]

Hallo,

ich kann dazu beitragen, dass

… du den verlinkten Lesestoff nicht aufmerksam genug beachtet hast…

Gruß
Kalk

[Rolf B]

Hallo Gustav,

die Frage war:

der Unterschied zwischen nav span .visually-hidden und nav span.visually-hidden ist Dir dabei klargeworden?

Deine Antwort sagt: Nein. Aber dieser Unterschied ist absolut essenziell. Ich beschreibe es in Kurzfassung:

Der Selektor nav span .visually-hidden besteht aus drei einfachen Selektoren, die durch Leerstelle - den Nachfahren-Kombinator - zu einem verbundenen Selektor kombiniert werden (Lektüre: CSS Begriffe). Grundsätzlich gilt: einfache Selektoren beziehen sich auf ein einzelnes Element, und verbundene Selektoren bilden einen Pfad über mehrere Elemente. Der letzte einfache Selektor in einem verbundenen Selektor bezeichnet das Element, für das Eigenschaften gesetzt werden.

Die einfachen Selektoren nav und span treffen Elemente mit diesem Tag-Namen. Verbunden durch den Nachfahrenselektor trifft nav span ein span-Element, das ein nav als Vorfahr hat. Der einfache Selektor '.visually-hidden' ist ein Klassenselektor. Er ist eine Abkürzung für *.visually-hidden, das heißt: Ein Element mit beliebigem Namen und der Klasse visually-hidden. Zusammen mit dem Nachfahrenkombinator wird nach einem Element mit der Klasse visually-hidden gesucht, das ein span in seiner Vorfahrenliste hat, das ein nav in seiner Vorfahrenliste hat. Zum Beispiel so:

<nav>
   <span>
      <em class="visually-hidden">blabla</em>
   </span>
</nav>

em steht hier symbolisch für irgendein in einem Span erlaubtes Element.

Der Selektor nav span.visually-hidden hat eine Leerstelle weniger. Er besteht aus zwei einfachen Selektoren. Teil 1 ist wieder ein Element-Selektor für das nav ELement, und Teil 2 trifft ein span-Element, das die Klasse visually-hidden hat. Der verbundene Selektor findet also ein span mit Klasse visually-hidden, das ein nav in seiner Vorfahrenkette hat.

Das ist ein entscheidender Unterschied, den man unbedingt wissen muss, wenn man funktionierende CSS-Regeln verfassen können will.

Wie Gunnar anmerkte, sind beide Selektoren für den visually-hidden Zweck nicht sinnvoll. Wenn ein Element die Klasse visually-hidden bekommt, sollte es versteckt werden. Immer. Egal ob Span oder nicht. Deshalb ist der Selektor, den Du jetzt verwendest, auch die beste Lösung. .visually-hidden, ohne irgendwas davor, trifft jedes Element mit dieser Klasse.

Rolf

[Matthias Apsel]

Hallo Gustav,

Ich habe in meinem konkreten Fall jetzt einiges durchprobiert:

Pronbieren kann durchaus zur Lösungsfindung beitragen. Das setzt aber voraus, dass man wirklich systematisch probiert.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

systematisch reicht hier nicht. Man muss auch an der richtigen Stelle probieren, und wissen, was das Probierte tut. Alle 4 Varianten, die er gepostet hat, weisen den gleichen Grundsatzfehler auf.

Rolf

[Gustav]

Bitte habt etwas Nachsicht, ich bin nicht so versiert bei der gesamten Thematik. Für euch ist das mitunter zum hundertsten Mal Wiederholtes.

Und auch...

nav span .visually-hidden { clip:...

...hatte ich, wie zuvor geschrieben, schon durch. Funktioniert bei mir aber nicht.

[Rolf B]

Hallo Gustav,

nav span .visually-hidden { clip:... (...) funktioniert bei mir aber nicht.

Das habe ich durchaus zur Kenntnis genommen, und Teil 1 des Problems besteht darin, dass das nicht funktionieren kann. Weil es einen Grundsatzfehler enthält.

Lesen bildet und schafft Versiertheit. Lerne, was Kombinatoren sind: CSS Selektoren und Kombinatoren. Verwende Kombinatoren nur da, wo sie auch hingehören!

Aber selbst wenn der Selektor richtig wäre, hast Du noch einen Fehler im HTML, den ich Dir auch genannt habe und den Du mutmaßlich nicht zur Kenntnis genommen hast. Wegen dieses Fehlers kann es nicht funktionieren. Zumindest ist er zur Zeit immer noch auf der eyes2k Seite vorhanden.

Wenn Du mich jetzt für einen Ar... hältst: mag sein. Dann aber ein Montessori-Ars..

Rolf

[Gustav]

Hallo Rolf,

mir ist es durchaus recht, selbst Fortschritte zu machen. Insofern bin ich dir nicht böse, sondern werde auf die Suche gehen.

Gustav

[Gunnar Bittersmann]

@@Matthias Apsel

Pronbieren kann durchaus zur Lösungsfindung beitragen. Das setzt aber voraus, dass man wirklich systematisch probiert.

Ach was‽

😷 LLAP

[Gunnar Bittersmann]

@@Rolf B

Mit einer Weißebene:

#home a {
    background: url(../img/home.png) no-repeat center/auto 72%;
}
#home a[aria-current=page] {
    background: linear-gradient(0, #fff8 0%, #fff8 100%),
                url(../img/home.png) no-repeat center/auto 72%;
}

Da stehste da wie ein begossner Pudel. WET (write everything twice)

Das ist das Gegenteil von DRY (don’t repeat yourself):

#home a {
    background: var(--shade, none), url(../img/home.png) no-repeat center/auto 72%;
}
#home a[aria-current=page] {
    --shade: linear-gradient(0, #fff8 0%, #fff8 100%);
}

In trockenen Tüchern ist das aber auch noch nicht – dieselbe Farbe kommt zweimal vor.

Ginge so

#home a[aria-current=page] {
    --shade: conic-gradient(#fff8 0% 100%);
}

wenn diese komischen Gradienten im Firefox nicht noch hinter einem Flag versteckt wären.

Aber auch das ist nur ein Hack. Zukünftig soll’s so gehen:

#home a[aria-current=page] {
    --shade: image(#fff8);
}

Was man so alles bei der CSSBattle lernt …

😷 LLAP

[Rolf B]

Hallo Gunnar,

ich bin ein IE Unterstützer. Ich vermeide --var.

Rolf

[Gunnar Bittersmann]

@@Rolf B

ich bin ein IE Unterstützer.

Das ist gut. (Vom Deppenleerzeichen mal abgesehen.)

Ich vermeide --var.

Du vermeidest progressive enhancement – das ist schlecht.

😷 LLAP