Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

[HTML_go]

Hallo HTML_go,

html {
  line-heigt: 1.5
}

heigt statt height war bestimmt nur ein Typo im Forum, oder?

Oh ja, das war ein Tippfehler; aber tatsächlich auch in der CSS! Ist dort nun auch korrigiert. Danke!

Zum Skiplink: Dinge, die vor Nichtassistenzverwendern versteckt sein sollen, versieht man gerne mit einer "visually-hidden" Klasse. Die sieht so aus und deckt diverse Browser-Quirks ab, die das Versteck gelegentlich verraten:

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

Also obigen CSS-Eintrag habe ich derzeit noch nicht implementiert. Sollte ich? Ich habe es lokal mal probiert, aber keine Änderung der Website feststellen können ...

Problem ist nur, dass Du den Link sichtbar machen willst, sobald der Fokus draufsteht (für die Tastaturbenutzer). Du musst also etliche CSS Eigenschaften wieder abschalten, um Sichtbarkeit zu bekommen:

#skip-link:focus {
  clip-path: unset;
  height: auto;
  width: fit-content;
}

Diese Bereiche (skip-link) im CSS sind bereits [mit der vorangestellten Raute (#)] deaktiviert. Das hatte ich schon von Gunnars Vorschlag übernommen. Sieht bei mir so aus:

 #skip-link {
    position: absolute;
    left: 0;
    top: 0;
    background: black;
    color: white;
    padding: 0.25em;
    transform: translateY(-100%);
    transition: 0.2s transform;
  }

 #skip-link:focus {
    transform: translateY(0);
  }

müsste eigentlich reichen. In deinem Fall vielleicht auch noch background-color:white, damit sich der Link vor dem Hero-Bild abhebt. Weitere Deko sei Dir überlassen 😉

Für den Fall, dass nicht der Skiplink direkt die visually-hidden Klasse bekommt, sondern er in einem visuell versteckten Elternelement steckt, müsste man in der Sichtbarkeitsregel dieses Elternelement ansprechen und :focus-within verwenden. Also etwas in dieser Art:

<div id="skip-link" class="visually hidden">
   <a href="#main">Zum Hauptinhalt</a>
</div>

#skip-link:focus-within { ... }

Ist mir jetzt noch zu theoretisch, sorry.

Ich habe meine derzeitige "standard.css" mal durch einen CSS-Validator (https://jigsaw.w3.org/css-validator/ gejagt und erhalte einen Haufen Warnungen aber keine Fehlermeldung. Demnach liegt ja wohl kein Fehler vor, aber die Warnungen deuten vermutlich auf Dinge hin, die verbessert gehören?

Die CSS ist noch nicht online, weswegen ich sie hier reinstelle:

html {
    line-height: 1.5;
}

body {
  max-width: 60em;
  margin: auto;
}

header, nav, main {
  margin: 0.25em 0.5em;
}

header a {
  display: block;
}

header img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;/*zentriert die Blöcke mit den Nav-Links nun auch bei horizontaler Betrachtung; zusammen mit @media screen ...*/
  justify-content: center;
}

nav li {
  background: linear-gradient(
    to bottom,
    hsl(280deg 2% 38%),
    hsl(280deg 2% 10%) 40% 60%,
    hsl(280deg 2% 38%)
  );
  flex-grow: 1;
}

nav a {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: center; /* für schmale Ansicht - z.B. Smartphone */
  justify-content: center; /* für breite Ansicht - z. B. PC-Bildschirm */
  height: 3em;
  color: #f2f2f2;
  padding: 0px 16px;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 1.1em;
  user-select: none;
}

nav a:where(:hover, :focus) {
  background-color: #18a096;
  color: black;
}

nav a:focus {
  position: relative;
  z-index: 1;
}

nav [aria-current] a {
  background: linear-gradient(
    to bottom,
    hsl(280deg 2% 38%),
    hsl(60deg 95% 20%) 40% 60%,
    hsl(280deg 2% 38%)
  );
  color: white;
}

h1 {
  background-color: hsl(280 2% 28%);
  color: white;
  text-align: center;
  margin: 1em 0 0.5em 0; /* Hier Abstand zwischen Nav und darunterstehendem Seiten-Inhalt einstellen */
  padding: 0.75em 1em;
  font-size: 1.4em;
}

p {
  padding-left: 30px;
  padding-right: 30px;
  font-size: 1.2em;
}

main ul {
  padding-left: 60px;
  padding-right: 30px;
  font-size: 1.2em;
}

@media screen and (max-width: 760px) {/*bewirkt bei Verschmaelerung des Bildschirms ein vertikales Stapeln der Nav-Leiste (topnav)*/
  header,
  nav,
  main {
    margin: 0 0 0.25em 0;
  }
  nav ul {
    flex-direction: column;
  }

#skip-link {
    position: absolute;
    left: 0;
    top: 0;
    background: black;
    color: white;
    padding: 0.25em;
    transform: translateY(-100%);
    transition: 0.2s transform;
  }

#skip-link:focus {
    transform: translateY(0);
  }
}