css_blog-header.jpg

Mit CSS3 Websites gestalten

19.06.2018 Digitalisierung gelesen in 7 min

CSS ist heutzu­tage ein sehr wichtiges Instrument für die Gestaltung von Websites. Auch wenn viele CMS-Systeme die Ein­richtung einer Site er­leichtern, so be­nötigt man für die Detail­anpas­sung immer noch Kennt­nisse in CSS.

HTML und CSS stehen in enger Ver­bind­ung mit dem W3C, dem World Wide Web Kon­sortium. Das Gremium befasst sich mit der Erar­beitung der Standards und Spezi­fi­kationen für die ver­schieden­sten Formate. Das W3C ist dafür ver­ant­wortlich, dass sich der neue CSS3 Standard durch­gesetzt hat.

Nahezu alle neuen Browser unter­stützen diese Version. Der Vorteil von CSS3 besteht darin, dass sich Änder­ungen und Neuer­ungen damit besser um­setzen lassen. Die Dar­stellung von Web­sites sieht wesent­lich besser aus als mit den älteren Ver­sionen.

Gerade auf Tab­lets und Smart­phones zeigt sich die Stärke von CSS3. Die Sites werden schnel­ler geladen, was natürlich einen en­ormen Plus­punkt für die mobile Opti­mierung dar­stellt.

Das beste CSS funktio­niert selbst­verständ­lich nicht ohne HTML. Kurz gesagt ist HTML dafür zu­ständig, die Struktur einer Site zu er­fassen und zu regeln.

Es geht darum fest­zu­legen, ob es sich bei einem einzel­nen Bestand­teil um einen Ab­satz, eine Über­schrift oder ein Auf­zählungs­zeichen handelt.
Mit CSS hin­gegen wird die Dar­stellung der In­halte fest­gelegt. Hierzu zählen das Layout, die Farben und die Typo­grafie.

Inhaltsbild 2 Blog-Beitrag CSS3

Welche Browser unter­stützen CSS3?

Firefox gehört mit zu den be­lieb­testen Internet­browsern. Er kann die gän­gigs­ten CSS3-Formate sinn­voll um­setzen. Die neuen tech­nischen Möglich­keiten wie Mehr­spalten­layouts, Trans­forma­tionen und Über­gänge stellen für den Browser kein Pro­blem dar.

Micro­soft hat mit jeder Weiter­ent­wick­lung des Inter­net Ex­plorers die Um­setzung von CSS3 ver­bessert. Mittler­weile ist Micro­soft beim Browser Edge ange­langt, der mit dem neuen Format kom­pa­tibel ist und den IE11 ersetzt.

Viele Personen benutzen aber noch ältere Ver­sionen, die vom Kon­zern nicht mehr mit Up­dates ver­sorgt werden und CSS3 daher noch nicht unter­stützen.

Safari und Chrome gehören zu den An­wen­dungen, welche CSS3 am besten um­setzen können. Beide Browser setzen auf diesen fort­schritt­lichen Stan­dard. Gerade Google bietet viele seiner Pro­dukte an, die gleich auf die neue Version bauen.

Opera ist ein kosten­loser Browser, bei dem der Werbe­blocker stan­dard­gemäß inte­griert ist. Er ist für Mac, Linux und Windows erhält­lich und reicht von der Ge­schwindig­keit an die anderen Browser heran.

Zahl­reiche Er­weiter­ungen sorgen dafür, dass der Nutzer weitere nütz­liche Funk­tionen ein­richten kann. Seine Vorteile spielt Opera vor allem auf Smart­phones aus. Das Pro­gramm unter­stützt CSS3 ab Opera Presto 2.6.

Die wichtig­sten Neuer­ungen für die Web­site­ge­staltung

Eine neue Funk­tion stellen die CSS3-Fonts dar. Damit ist es mög­lich, jede be­liebige Schrift­art in die Web­site einzu­betten. Früher war die Dar­stel­lung einer Nicht­stan­dard­schrift nur möglich, wenn der Nutzer sich diese zuvor auf seinen PC ge­laden hatte.

Eine Ein­schränk­ung bei den CSS3-Fonts gibt es aller­dings noch. Wie bereits be­schrieben, bilden ältere Browser­ver­sionen die neuen Formate nicht ab. Eine weitere Neuer­ung stellen die Media Queries dar, mit deren Hilfe unter­schied­liche For­ma­tierungen je nach Bild­schirm­größe zur An­wendung kommen.

Im Klar­text be­deutet dies, dass beim Zu­griff auf eine Website über ein Smart­phone kleinere Stil­angaben aktiviert werden.

Ein weiterer Vor­teil von CSS3 ist, dass Hinter­grund­bilder damit besser ge­steuert werden können. Mit dem Befehl „background-size“ kann die Größe von Hinter­grund­bildern an­ge­geben werden.

Außer­dem lassen sich einem Bild mehrere Hinter­grund­bilder zu­ordnen. Der Be­fehl legt eben­falls fest, an welcher Stelle (am Rahmen, Inhalt, Innen­abstand) das Hinter­grund­bild aus­ge­richtet werden soll. Des Weiteren können mit CSS3 die Zeilen­um­brüche und Blöcke sinn­voller ge­stalten werden.

Ein zu­sätz­licher wichtiger Punkt ist, dass sich Ani­mationen ganz ohne die Ver­wend­ung von Java­Script er­stellen lassen. Dies ist vor allem von Vorteil, wenn Nutzer die Ver­wend­ung von Java­Script aus­ge­schaltet oder blockiert haben. Die Ani­mationen werden trotz­dem auf­ge­rufen und sind nicht von JavaScript ab­hängig.

Inhaltsbild 1 Blog-Beitrag CSS3

Die Anwen­dung von CSS3 im Alltag

CSS3 kommt im beruf­lichen All­tag immer mehr zur An­wen­dung. Die meisten CMS-Systeme und Design­vor­lagen bauen bereits darauf auf. Wie bereits be­schrieben, setzt Google in vielen seiner An­wen­dun­gen eben­falls auf die neuen Effekte.

Es zeigt sich aber auch, dass viele Web­sites noch zum Teil auf den ganz alten Funk­tionen basieren. Viele be­fürchten immer noch Nach­teile bei der Dar­stellung der In­halte, da (wie bereits beschrieben) die älteren Browser­ver­sionen CSS3 nicht unter­stützen. Doch über­wiegen die Vor­teile von CSS3 auf jeden Fall.

Dies zeigt sich vor allem daran, dass CSS3 seine Plus­punkte bei der Dar­stellung von mobilen In­halten aus­spielt. Da immer mehr Menschen von ihren Mobil­tele­fonen auf die In­halte von Web­sites zu­greifen, ist es eigent­lich un­er­läss­lich, dass sich CSS3 zu­nehmend eta­bliert.

Die Mehrheit der An­wender setzt eigent­lich schon voraus, dass die Web­sites grafisch und in­halt­lich sehr gut auf­be­reitet sind und dabei gleich­zeitig flüssig laufen. Sie möchten außer­dem keine Java­Script­an­wen­dun­gen mehr öffnen, welche die Lade­zeit un­nötig ver­zögern. Die weitere Ent­wick­lung in den nächsten Jahren lässt sich nur schwer voraus­sagen.

Sicher ist aller­dings, dass der Trend zu­nehmend in Richtung Ver­bes­ser­ung der Lade­zeit und der Dar­stel­lung geht. So wird es in der nächsten Zeit auch eine Weiter­ent­wick­lung bei CSS geben, damit die neuen An­forder­ungen besser in die Reali­tät um­gesetzt werden können. Es bleibt abzu­warten, welche neue Funk­tionen dann auf uns zu­kommen.

Wir freuen uns darauf, Dein Projekt voran­zubringen.

Vielleicht hast Du ja sogar die Möglich­keit, bei uns in Augsburg auf einen Kaffee vorbei­zukommen. Der ist zwar nicht ganz so gut, wie unsere Software, aber ehrlich. Eben so, wie wir es mögen.

Anfrage senden   08 21/ 99 95 910   info@mpunkt.com