Mehr zur Inhaltsprüfbarkeit

Attribute content-visibility von CSS: Leistungsverbesserung und Zugänglichkeitsprobleme

Im August 2020 wurde das CSS-Attribut content-visibility in Chrombrowsern verwendet, und Una Kravets und Vladimir Levin schrieben einen Artikel darüber. Um seine Leistungsvorteile vollständig zu nutzen, muss es in Verbindung mit contain-intrinsic-size verwendet werden, die eine Schätzung der Höhe großer Inhaltsbrocken auf der Seite erfordert. Der seltsamste Teil davon ist, dass Sie eine ungefähre Vermutung über die Höhe dieser großen Stücke machen müssen.

Ich habe schon einmal eine Frage gestellt: einfach die Höhe? Was passiert, wenn die Vermutung falsch ist? Wird es die Leistung beeinflussen? Wenn es einen großen Unterschied zwischen einem großen Bildschirm und einem kleinen Bildschirm gibt, wird dieser Wert (oder sollte) in einem anderen Ansichtsfenster geändert werden?

Jake Archibald und Das Surma haben kürzlich ein Video gemacht, um diese Probleme zu klären. Mit ungefähr 7 Minuten und 30 Sekunden des Videos können Sie sehen, wie verwirrend das ist. Jake verwendete eine große HTML -Spezifikationsseite als Demonstration und fügte einen Wrapper für große Stücke von HTML -Inhalten hinzu und wandte den folgenden Code an:

 Abschnitt {
  Inhaltssicherheit: Auto; /* Verzögerungszeichnung*//
  enthält intrinsische Größe: 1px 5000px; /* Erraten Sie die Inhaltsgröße, die Breite spielt keine Rolle*/
}

Offensichtlich ist 5000px nicht die Höhe des Elements, sondern die Größe des Inhalts dieses Elements. Dies ist wichtig, da es die Höhe des übergeordneten Elements auf diesen Wert erhöht, es sei denn, das übergeordnete Element überschreibt es mit seinem eigenen Höheattribut. Die Magie davon ist, dass der Browser nur den ersten Abschnitt zeichnet (die Höhe der Ansichtsfenster dürfte weniger als 5000 PX beträgt) und die Verzögerung des Restes verzögert. Es ist ein bisschen wie fauler Laden, aber es funktioniert auf allem, nicht nur in den Medien. Es wird davon ausgegangen, dass der nächste Abschnitt eine Höhe von 5000 PX hat, aber sobald sein Oberteil sichtbar ist, wird er tatsächlich gezeichnet und die richtige Höhe wird bestimmt. Wenn Ihre Seite also nur große Inhaltsblöcke ist, die zusammengestapelt sind, sollte die Verwendung einer sehr großen Anzahl gut funktionieren. Wenn Ihre Website komplizierter ist, seien Sie glücklich.

Dies ist ein tolles Video, das Sie auschecken sollten: Videolink

Dies ist ein weiteres Beispiel dafür, was Sie Ihrem Browser auf Website -Informationen zur Verfügung stellen müssen, damit dies die Leistung verbessern kann. Der Browser selbst kann diese Informationen finden, kann jedoch erst nach der Durchführung von Betriebskosten erfolgen. Sie müssen es also im Voraus sagen und so einige Arten von zusätzlichen Arbeiten vermeiden. Wenn wir für reaktionsschnelle Bilder das srcset -Attribut verwenden, um Bilder bereitzustellen und den Browser im Voraus ihre Größe zu mitteilen, einschließlich eines sizes , das CSS -Verhaltensinformationen enthält, kann es im Voraus berechnet werden und nur die besten Bilder werden heruntergeladen. In ähnlicher Weise können wir für will-change in CSS den Browser im Voraus mitteilen, dass wir den Umzug so machen, dass er voroptimiert werden kann, andernfalls kann er dies nicht tun. Das ist verständlich, aber ein wenig langweilig. Es ist, als würden wir eine stuff-you-need-to-know.manifest Sie für Sie mit der Manifest-Datei zur Verfügung stellen, bevor der Browser etwas anderes macht-aber das wäre eine zusätzliche Anfrage!

Auch Barrierefreiheitsprobleme sind wichtig. Steve Faulkner getestet angewendet, um content-visibility: auto auf Bilder und Absätze:

Inhalt ist visuell versteckt, aber in Jaws und NVDA werden versteckte Bilder angekündigt, aber der Inhalt des Elements wird nicht bekannt gegeben. Dies bezieht sich darauf, wie der Inhalt der Bild- und Absatzelemente im Browser -Zugehörigkeitsbaum dargestellt wird: Das Bild wird in der Zugehörigkeitsbaum mit ALT -Text als Namensname angezeigt. Der Inhalt von Absatzelementen befindet sich nicht im Breacing -Baum.

Er stellte fest, dass durch die Spezifikation, die auf diese Weise versteckte Inhalte nicht für die Bildschirmleser zur Verfügung gestellt werden sollten. Ich kann beide Fälle verstehen, z. B. das Verstecken von allem wie display: none , was bedeutet, dass nichts im Breacing -Baum ist. Oder behalten Sie alles im Breacing -Baum. Jetzt befindet es sich in einem Zwischenzustand. Möglicherweise sehen Sie eine Reihe von isolierten Bildern im Barrierefreiheitbaum ohne einen anderen Kontext mit Ausnahme ihres Alt -Textes. Dies ist ein interessantes Beispiel dafür, dass die neue Technologie, die eingeführt wird, rauer sein kann, als Sie gerne sehen würden.

Apropos Alt -Texte, wir alle wissen, dass sie nicht leer sein sollten, wenn sie wichtige Dinge darstellen, die für Menschen beschrieben werden müssen, die sie nicht sehen können. Dave sagt, sie sollten wie Absätze sein :

Ich habe endlich die einfachste Verbindung hergestellt: Der Alt -Text ist wie ein Absatz. Textbilder. Ich weiß, dass dies grundlegend ist, aber es hilft mir zu verstehen, wie man einen guten Alt -Text und die Quellreihenfolge meines Codes schreibt.

Ich möchte hier nicht zu negativ sein! Die Leistungssteigerungen für die Einrichtung langer Bildlaufseiten mit content-visibility sind riesig, was großartig ist. Es ist gut, zwei Codezeilen zu verwenden, um dem Browser mitzuteilen, was nicht gezeichnet werden kann.

1. Ich sage immer wieder "Zeichnen", aber ich weiß nicht, ob dies wirklich der richtige Begriff ist oder ob dies genauer ist. In der Spezifikation wird Dinge wie "Ermöglichung von Benutzeragenten ermöglichen, möglicherweise viel Layout auszulassen und die Arbeit zu rendern, bevor sie es brauchen" (Betonung meiner).

Das obige ist der detaillierte Inhalt vonMehr zur Inhaltsprüfbarkeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!