Wo Stehst Du
Dadurch verbessert sich das Arbeitstempo und die JavaScript-Dateien werden kleiner. Für komplexe Animationen (einschließlich Partikelanimationen) eignen sich die JavaScript-Animationsbibliotheken von GreenSock (GSAP). GreenSock vereinfacht die eher schwierigen Aspekte von CSS-Animationen, beispielsweise die Anpassung der zeitlichen Abfolge mehrerer Animationen und die unabhängige Animation von Transformationselementen. Verwenden Sie keine JavaScript-Bibliotheken oder -Frameworks, in denen die JavaScript-Methode setInterval für Animationen genutzt wird. Bei der manuellen Programmierung sollten Sie außerdem auf die Methode setInterval verzichten. setInterval beansprucht viele Browserressourcen, beeinträchtigt die Leistung und erfordert mehr Code. Falls JavaScript-Animationen erforderlich sind, sollten Sie die Methode requestAnimationFrame in Betracht ziehen, die speziell für Animationen entwickelt wurde. Animationsleistung optimieren requestAnimationFrame verwenden CSS- im Vergleich zu JavaScript-Animationen Bevor Sie die CSS-Dateien in Studio hochladen, komprimieren Sie CSS mit einem CSS-Komprimierungstool.
Beispiel ¶ text-decoration: none;} color: #000; border-bottom: 1px solid #ff0000;} color: #e600e6; border-bottom: 1px solid #b3b3b3;} color: #2d8653; border-bottom: 1px solid #000099;} html > Versuch es selber! Für ein komplettes Bild betrachten wir ein Beispiel mit allen erwähnten Möglichkeiten: Beispiel ¶
p > html > Versuch es selber! Darüber hinaus gibt es vier Link-Zustände, in denen Links je nach Zustand gestaltet werden können: a:link - ein normaler, unbesuchter Link a:visited - ein besuchter Link a:hover - ein Link, wenn der Benutzer die Maus darüber bewegt a:active - in dem Moment, in dem ein Link angeklickt wird Wenn Sie den Stil für mehrere Verbindungszustände festlegen, befolgen Sie diese Reihenfolgeregeln: a:hover MUSS nach a:link und a:visited kommen a:active MUSS nach a:hover kommen Beispiel ¶ a:link { color: #ccc;} a:visited { color: #095484;} a:hover { a:active { color: #800000;} html > Versuch es selber! Wie kann man die Hyperlink-Unterstreichungsfarbe ändern und die Farbe des Ankertextes ändern ¶ Um die Unterstrichfarbe zu ändern, müssen Sie die Farbe zunächst mit der Eigenschaft text-decoration entfernen und den Wert none einstellen, dann fügen Sie die Eigenschaft border-bottom mit width (in diesem Fall verwendet als Hyperlink Unterstrichbreite), border-style (solid, dotted, oder dashed) hinzu und für die Anker-Textfarbe verwenden Sie die Eigenschaft color (zur Definition des Farbcodes).
Die anfängliche Ladegröße bezieht sich auf die Gesamtgröße der komprimierten Datei mit allen Creative-Assets, die an den Browser gesendet werden, um als Erstes ausgeliefert zu werden. Dies schließt alle Dateien ein: Bilder, HTML, CSS und JavaScript. Enabler-Dateigröße Auch wenn jedes Studio-Creative einen Enabler enthalten muss, speichern Webbrowser eine Kopie von ihm in ihrem Cache. Grund hierfür ist, dass für jedes Studio-Creative dasselbe Skript geladen wird. Die Größe des Enabler-Skripts liegt bei 25 KB (komprimierte Datei) und 75 KB (RAW-Datei). Weitere Informationen finden Sie in den IAB- und Studio-Richtlinien: HTML5-Richtlinien des IAB (imPDF-Format, siehe S. 4 und 6) Creative-Richtlinien von Studio Polite Load und Publisher-Spezifikationen Mit einem Polite Load wird der Ladevorgang weiterer Creative-Assets wie Bilder und Videos verzögert, bis die Seite des Publishers geladen wurde. Der Unterschied zum anfänglichen Laden liegt darin, dass sich der Wert für das anfängliche Laden auf die Gesamtgröße der komprimierten Datei mit allen Creative-Assets bezieht, die an den Browser gesendet werden, um als Erstes ausgeliefert zu werden.
Wo Stehst Du, 2024