Safini.png
Safini Journal - Nürnberg

Werden Sie freier und unabhängiger Journalist bei Safini.de.

Anonym und innovativ.

11 Geheimnisse über CSS, die Sie nicht verpassen dürfen(727.597 Aufrufe) | Freitag, 03.03.2023, 10:04 AM |

Jeder Webentwickler braucht eine Trickkiste, um in diesem wettbewerbsintensiven Geschäft einen Vorteil zu haben. Das Wissen um ein paar Geheimnisse kann dazu beitragen, Ihren Ruf in der Webprogrammierung zu festigen, da Sie Designeffekte erzielen können, die ein typischer Webentwickler nicht erreichen kann. Nachfolgend finden Sie 11 CSS-Geheimnisse, die Sie nicht verpassen dürfen, wenn Sie Ihre Webprogrammierfähigkeiten verbessern möchten.

1. Erstellen von Übergängen ohne Verwendung von JavaScript oder CSS-Animationen

Die Verwendung von JavaScript oder CSS-Animationen kann für einige einfache Übergangseffekte zu viel des Guten sein. Um beispielsweise ein Bild so aussehen zu lassen, als würde es von einem kleinen Punkt zu einem Bild voller Größe wachsen, können Sie mehrere ähnliche Übergänge verwenden, die sich durch ihre Höhe und Breite unterscheiden. Viele Übergänge können innerhalb weniger Sekunden angezeigt werden, um eine ziemlich flüssige, animationsähnliche Anzeige zu erstellen, ohne das kompliziertere JavaScript von sogar CSS-Animationen verwenden zu müssen. Die meisten Browser unterstützen diese Funktion, außer Internet Explorer.

2. Scrollen des Elements sowie des Hintergrunds

Viele CSS-Experten sind mit zwei Haupt-Scroll-Optionen vertraut – scrollen und fixiert. Mit der Scroll-Option können Sie die Seite scrollen. Wenn die Seite andererseits nicht gescrollt werden kann, ist die feste Option wirksam. Dennoch wissen einige Entwickler nichts von einer neu eingeführten dritten Alternative, background-attachment local. Unter dieser neuen Option ist es jetzt möglich, sowohl das Element als auch den Hintergrund zu scrollen, um tolle visuelle Effekte zu erzeugen. Derzeit unterstützen die meisten Browser diese CSS-Funktion, einschließlich Opera, Internet Explorer, Safari und sogar Google Chrome.

3. Positionierung von Inhalt, Padding und Borders

Grundsätzlich beinhaltet dieser Prozess die Verwendung der CSS-Box-Sizing-Funktion. Normalerweise gibt es zwei Alternativen, die standardmäßige Content-Box-Option und die Border-Box-Alternative. Wenn Sie sich für die Content-Box-Alternative entscheiden, werden die Polsterung und der Rahmen außerhalb einer angegebenen Breite und Höhe positioniert. Kurz gesagt, die Größe der Inhaltsbox umfasst weder die Umrandung noch die Polsterung. Sollten Sie sich dagegen für die Boarder-Box-Alternative entscheiden, beinhaltet die angegebene Boxengröße auch die Polsterung und den Boarder. Die Kenntnis dieses Unterschieds kann Ihnen als Webentwickler helfen, bei der Positionierung verschiedener Elemente innerhalb einer Webseite präziser zu sein.

4. Inhalte mit fester Breite erstellen und gleichzeitig den Hintergrund fließend halten

Dieses Geheimnis ermöglicht es Webentwicklern, Webseiten so zu konfigurieren, dass der Inhalt innerhalb einer festen Breite bleibt, während sich der Hintergrund frei an die Breite des Browserfensters anpassen kann. Der Hintergrund kann in verschiedenen Anzeigeeinstellungen gestaltet werden. Andererseits wird der Inhalt in eine Hülle mit fester Breite eingepasst. Dieser tolle Effekt lässt sich mit der Option „Margin Auto“ erzielen, die in der Lage ist, den verfügbaren Platz innerhalb einer Browserseite durch prozentuale Maßangaben statt absoluter Festwerte auszunutzen. Eine gute Möglichkeit, diese Funktion zu nutzen, besteht darin, 50 % der Gesamtbreite dem Inhalt zu widmen und dann zuzulassen, dass der dynamische Hintergrund je nach Fenstergröße zwischen 50 % und 100 % des Browserbereichs einnimmt.5. Textausrichtung in Browsern ohne Silbentrennungsfunktion Einige Browser haben keine Silbentrennungsfunktion für Text, was normalerweise dazu führt, dass der Text nicht lesbar ist, wenn die Blocksatz-Ausrichtungsfunktion unter CSS-Codierung verwendet wird. Glücklicherweise haben einige Browser eine automatische Silbentrennungsfunktion. Für diejenigen, die keine Silbentrennung haben, ist es am besten, die Verwendung von Blocksatz zu vermeiden; was den Text lesbarer macht.

5. Textausrichtung in Browsern ohne Silbentrennungsfunktion

Einige Browser haben keine Silbentrennungsfunktion für Text, was normalerweise dazu führt, dass der Text nicht lesbar ist, wenn die Blocksatz-Ausrichtungsfunktion unter CSS-Codierung verwendet wird. Glücklicherweise haben einige Browser eine automatische Silbentrennungsfunktion. Für diejenigen, die keine Silbentrennung haben, ist es am besten, die Verwendung von Blocksatz zu vermeiden; was den Text besser lesbar macht.

(Stimmen: 0) | i

11 Geheimnisse über CSS, die Sie nicht verpassen dürfen - Stimmen: 0

  • rate_1.pngUngenügend: 0 Stimmen
  • rate_2.pngBefriedigend: 0 Stimmen
  • rate_3.pngDurchschnittlich: 0 Stimmen
  • rate_4.pngGut: 0 Stimmen
  • rate_5.pngAusgezeichnet: 0 Stimmen

Ihr Safini Journal - Nürnberg - Team

 Kommentarfeld einblenden
 Avatar personalisieren

Gravatar personalisieren

Lieber Nutzer,
für Name und Titel stehen Ihnen jeweils 64 Zeichen zur Verfügung.
Das Kommentarfeld ist auf 512 Zeichen begrenzt.

Avatar Zuordnung.
Gravatar steht für „Globally Recognized Avatar“. Ein Kleinbild (Avatar), das Ihnen Weltweit zur Verfügung, sofern die Webseite den Dienst „Gravatar“ eingerichtet hat, steht.
Hinter diesem monetärfreien Dienst steht das Unternehmen „Automattic“, also die Programmierer von WordPress.

Wie geht das?
Rufen Sie die Seite Gravatar.com auf und registrieren Sie sich über den blauen Button „Sign In“.
Nach erfolgreicher Anmeldung sehen Sie im Dashboard nach dem Einloggen den Menüpunkt „Add an Image“.
Hier können Sie das Bild hochladen, dass künftig als ihr Avatar dienen soll.

Sie können mehrere E-Mail-Adressen einrichten, die jeweils mit dem Gravatar (auch individuell) verknüpft sind.
Wenn Sie künftig eine der bei Gravatar.com hinterlegten E-Mail-Adressen verwenden um auf einem Blog oder in einem Forum zu kommentieren, das diesen Service unterstützt, wird Ihr bei Gravatar.com hinterlegtes Profilbild mit angezeigt.

Sie können auch ohne Gravatar posten, es wird dann ein zufälliges Monster-Bild angezeigt.
Sollten Sie später ein Gravatar einrichten, wird dieses mit ausgelesen und angezeigt.

Für das Kommentieren gilt die Deutsche Rechtsprechung.
Eine Freischaltung erfolgt erst nach Überprüfung des Texteintrages.
Name und E-Mail Angaben sind davon nicht betroffen.

Ihr Safini Journal - Nürnberg - Team