Welche CSS Einheiten gibt es? Welche sollte man nutzen? [Tutorial]

[@lukasgeyer9641]

Ist ja nice... Ich hab gerade so ein beschriebenes Problem mit em und wusste nicht genau wie ich es begründen soll.... Danke für die Nachhilfe ;)

[@try2beatus502]

Top Video und sehr Hilfreich! :)

[@alejandronieto576]

Danke! hat es mir klarer gemacht.

[@UnleashedDesign]

Danke freut mich wenn es dir geholfen hat :)

[@kaine2694]

die Einheit ch kann zum Beispiel mit p { max-width: 50ch } gut verwendet werden. Durch die Berechnung von der ungefähren generellen Buchstabenbreite kann ich ein Ideallänge für Absatzbreiten unabhängig von der Schriftart erstellen. :D

[@derrick9903]

ch (characters) eignet sich beim stylen von monospace Schriften

[@mx-web7828]

Gutes Video, danke hat mir sehr geholfen!

[@UnleashedDesign]

Freut mich wenn ich helfen konnte :)

[@michaelschiessl3519]

Ich habe eigentlich alles super verstanden, nur bei den Punkten vmin und vmax hakt es noch bei mir. Bei 11:32 beschreibst du in einem Beispiel die Berechnung von vmin mit "ein vmin ist gleich ein fünfhundertstel Pixel" (also 1/500?) Dann bekomme ich aber ein Ergebnis von 1px und nicht 5px. Dein Beispiel funktioniert aber, wenn "ein vmin gleich ein einhunderstel Pixel ist" (also 1/100!), richtig? Wenn ich dich richtig verstanden habe, käme bei deinem Beispiel und der Verwendung von vmax der Wert 5.5px raus? (Weil vmax den größeren Wert als Basis verwendet?) Wäre schön, wenn du noch kurz auf die beiden Punkte eingehen könntest. Abgesehen davon ist meine Vermutung, dass ch eher einer historischen Grundlage entstammt. In den Anfängen des Internet und noch lange vor Google gab es auf jeder Seite einen View-Counter, der sehr oft ähnlich wie ein Tachometer angelegt war. Ich könnte mir vorstellen, dass dort Platzhalter benötigt wurden, welche sich an der breitesten Zahl (also der Null) orientierten, um den "Effekt" zu wahren.

[@k4es3kuch3n]

Sehr informatives Video! Einige der Einheiten kannte ich gar nicht. Könntest Du vielleicht mal ein Video dazu machen, wie man mit CSS einen fixed Footer gestaltet, der unabhängig von der Viewport-Größe funktioniert?

[@GortunNET]

Wenn ich dich richtig verstanden habe: .footer{ position:fixed; width:100%; height:100px; background:#aaa; bottom:0; left:0; }

[@k4es3kuch3n]

Ich meine, dass er immer am untersten Ende der Seite sitzen soll (position: initial), aber wenn der Content nicht den gesamten Browser ausfüllt, soll er am unteren Ende des Browserfensters sitzen (position: fixed)

[@GortunNET]

Also soll er standardmäßig den normalen Fluss der Elemente folgen, außer wenn die oberen Elemente nicht die gesamte Seite ausfüllen, dann soll er trotzdem am untersten Ende erscheinen? Spontan fällt mir da eine Berechnung mit Javascript ein. Ansonsten würde mit ein wenig gefummel auch Media Queries gehen, aber eher ungenaurer. Eine ideale CSS Lösung fällt mir da nicht ein. Mit Javascript kannst du die Höhen und Abstände der oberen Elemente summieren, packst das in eine Variable, IF(Variable + footerhöhe < displayhoehe){ Ändere footer-klasse zur fixed-footerklasse}; .offsetHeight sollte hierfür dein Freund sein :)

[@k4es3kuch3n]

Schade, ich hatte gehofft, um JavaScript drumherum zu kommen :/ Trotzdem danke :)

[@quic5HD]

Warum labert man über Standards?! Ist jetzt sehr radikal aber wenn einfach alle webdeveloper das benutzen was sie wollten dann bleibt dem Nutzer nichts übrig als zu updaten oder zwingt die Browser zur Aktualisierung

[@MrSerberker]

Der Wert der breite der Null kommt aus der typographie und genau genommen aus dem tabellensatz. Wenn du eine Schrift mit tabellenziffern hast, nehmen diese (auch die 1) normalerweise den platz von einer 0 oder von einem halben geviert ein. Wenn du also zum Beispiel eine tabelle hast und in dieser immer platz für genau 8 ziffern haben willst in der breite, dann macht die einhait "ch" sinn. Außerdem: Ich bezweifle, das rem einzug in ie7 oder 8 halten wird. Microsoft entwickelt diese browser nicht mehr weiter, die lassen sogar bestehende bugs von features in diesen vorhanden, so führt flexbox bei ie10 und ie11 zu fehlern, die nicht mehr repariert werden.

[@UnleashedDesign]

@Null: Ahh Danke für die Antwort :) hab ich dennoch noch nie gebraucht xD aber wer weiß vill irgendwann einmal. @IE: leider :/ ein ewiger Kampf zwischen "neue" Technik nutzen und "zurückgehalten" werden wegen f..... IE Versionen.

[@MrSerberker]

Unleashed Design ich hab die einheit auch noch nie benutzt, habe nur gerade das mit den nullen in meiner ausbildung gelernt und habe es darauf übertragen.

[@UnleashedDesign]

Ich frage mich in welche Situation man sowas nutzen könnte oder ob die Einheit einfach komplett überflüssig ist. Weil selbst bei Tabellen habe ich persönlich es noch nie gebraucht :D

[@frankiberlin]

Vielleicht kann man damit bei Verwendung einer proportionalen Schriftart beim Zahlenauflisten das Problem mit der schlechten Lesbarkeit umgehen? Gruß :)

[@eduardschwarzkopf2619]

ich finde das Video sehr informativ und ich hab auch echt etwas was dazu gelernt. Ich weiß jetzt auch nicht auf welche Zielgruppe deine Videos sind, aber für Anfänger wären einige Bilder oder konkrete Beispiele sehr hilfreich. Manchmal habe ich auch das Gefühl du sprichst alles in einem Rutsch durch, da könnte ein Schnitt ruhig gut tun und das Tempo bei soviel Informationsfluss raus nehmen. Ansonsten super Video, das war nur mein Senf dazu ;) MfG

[@UnleashedDesign]

Danke :) kein Ding ;) bitte ja immer um genau solches Feedback nur so kann man sich verbessern :)

[@eduardschwarzkopf2619]

perfekte Einstellung, weitermachen!

[@Chrizzonator]

Also das mit der "ch" Einheit macht vielleicht bei monspaced schriftarten Sinn, damit man dann genau weiß dass ein Text an stelle x endet so dass das immer gleich aussieht? Naja nur ne Vermutung :D Wie schaut es mit vw und vh etc. denn heutzutage im Jahr 2022 aus? alle gängigen Browser mitlerweile Kompatibel?

[@UnleashedDesign]

Kann man ohne Probleme anwenden :)

[@jokefreenveng6143]

Moin! Vielen Dank für deine regelmäßigen Videos. Du hast mir schon so einiges beigebracht! Es gibt aber ohne JS keine Möglichkeit mehrere Maßeinheiten anzugeben, so dass der Browser, je nach Kompatibilität, eine "Prioritätenliste" liest oder? (Also bspw.: Falls möglich "x vh", falls das nicht gelesen werden kann aber "x px")

[@UnleashedDesign]

hmmmm mit viel Aufwand evtl. jedoch kannst du sehr einfach verschiedene css datein für verschiedene browser festlegen

[@knackebrot102]

@@UnleashedDesign geht das nicht mit @supports?

[@timdienstplaner1104]

Kannst du bitte ein Video machen wie PDF Dateien (Rechnungen und Co) generiert werden und Gestaltungsmöglichkeiten? Danke Tatjana

[@UnleashedDesign]

Sowas ist leider relativ "schwer" ich kann dir PDFMake empfehlen :)

[@GortunNET]

Die Leiden des jungen Webdesigners. Man hat die tollsten Möglichkeiten, kann sie aber nicht effektiv nutzen, da man auch auf die älteren Browser achten muss. Beispielsweise ist die Flexbox richtig toll, jedoch wird dir ein älterer IE den Mittelfinger zeigen, wenn man versucht das Ding darzustellen. Deshalb arbeite ich heute noch mit floating, was ziemlich nervig sein kann.

[@UnleashedDesign]

Normal würde ich dir zustimmen :/ das Problem ist hierbei das auf Firmenrechnern großer Unternehmen oft noch Win 7 oder sogar Win XP läuft dort kann durch die Einstellung und die Sicherheitssoftware (Banken usw.) kein anderer Browser genutzt werden. Daher muss man leider drauf achten das zumindest IE8 schon noch läuft jedoch alles was drunter liegt wird von mir auch 0 beachtet :D

[@GortunNET]

Man entwickelt beruflich eine Website meist nicht für sich selbst, sondern für einen Kunden, der mit dieser Website seine Kunden/potenzielle Kunden erreichen möchte. Jetzt stell dir mal vor da kommt jemand, der "mit dem Internet Explorer Knopf das Internet startet" und die Website sieht total zerschossen aus. Was macht das für einen Eindruck? Die Person hat von Computern keine Ahnung und weiß nicht, dass man vielleicht mal sein Windows upgraden sollte oder einen anderen Browser verwenden. Trotzdem ist die Person der Kunde deines Kunden. Und die soll die Website nunmal erreichen. Und wie Unleashed schon sagte, hat man nicht immer die Wahl, welchen Browser man verwendet. Daher entweder eine Fallback Variante schreiben oder gleich bei CSS 2 Elementen bleiben. Im Zweifel muss es bei älteren Browsern nicht identisch aussehen, aber zumindest ansehnlich sein. Ob die Ecken nun abgerundet sind oder nicht, ist für die Funktionalität ziemlich wumpe, aber das Layout darf nicht zerschossen aussehen. Ich denke in 3 Jahren kann man aber mit einer wesentlich höheren Sorgenfreiheit neue CSS Funktionalitäten verwenden. Irgendwann muss man eben auch mal vorwärts kommen und kann nicht immer noch am alten festhalten.

[@Alex-fj7mb]

Mir ist es eigentlich egal, welchen Browser sie benutzen, denn irgendwann müssen IE-User einfach begreifen, dass sie Chrome oder irgendwelche Browser mit Chromium-Basis, wie z.B. Opera Neon benutzen sollten, oder?

[@GortunNET]

Nein @Code Alex , so einfach ist das nicht. Bei den Besuchern einer Website kann theoretisch jeder dabei sein. Von Jemandem der sich nicht auskennt, übern normalen User bis hin zum Hardcore Nerd, der mit irgendeinen selbstzusammengebastelten Browser daher kommt. Wichtig ist, das gängigste zu Unterstützen. Auch gibt es in Firmen gewisse Gruppenrichtlinien (meist übern AD DC geregelt), sodass nur der IE verwendet werden kann. Auch schon oft gesehen, dass noch alte Windows Versionen genutzt werden, weil dort eben die entsprechende Firmensoftware drauf läuft. Ja, irgendwo muss man die Grenze setzen. Für den IE6 entwickel ich auch nicht mehr. Aber davon auszugehen, dass jeder Nutzer 100% up-to-date ist, ist einfach eine falsche Annahme. P.s. FireFox

[@Alex-fj7mb]

Hr. Stender ja, aber im Job wissen die Leute normalerweise, dass "die Computer dort anders sind".. die Leute beanspruchen dort nur den Content und nicht das Layout..

[@bsszzt]

also für die komischen Einheiten die sich an der Breite der 0 orientieren (habe ich gerade zufällig in einem anderen Video gesehen klingt auch ganz logisch): wenn man mit diesen größen die maximale Breite eines Paragraphen, o.ä. festlegt, dann kann man, aus typografischen Gründen, vermeiden mehr als 75 Zeichen in einer Zeile zu nutzen (max-width: 75ch). Zwischen 45-75 Zeichen pro Zeile sind wohl besonders ästhetisch.

[@christianachleitner9439]

weiß nicht ob das jemand schon geschrieben hat aber bzgl der Größe ch und wann man sie nutzen könnte... Beispiel: Wenn man eine Font benutzt in der die Null größer ist als der die Buchstaben, und man aber möchte das Buchstaben und Zahlen gleich groß ist? Oder bin ich da am Holzweg? :D

[@Alex-fj7mb]

Was hältst du von Opera Neon? :D

[@UnleashedDesign]

Habe ich noch nicht genutzt :)

[@Alex-fj7mb]

Unleashed Design probier's mal aus.. es basiert auf Chromium und hat ein super Layout.

[@veitkunz7058]

Ich finde es echt schade, dass du em ohne Ausnahme schlecht redest. Denn für Responsive Design ist em absolut genial, weil man so einen ganzen Container einfach durch setzen der font-size größer oder kleiner machen kann, eben wegen der Verschachtelung. Für Responsive Design sind meiner Meinung nach em und vw die beiden wichtigsten Einheiten. Klar ist rem nicht schlecht, und auch bei Responsive Design ist es auch oft genug wichtig, dem Text eine feste Größe geben zu können (vor allem Fließtext), aber Abseits vom Text hat mir em beim allgemeinen Seitenlayout schon extrem viel Arbeit abgenommen. ich habe diese Woche erst auf einer Webseite versucht, einen Container responsive zu gestalten. Durch die Konsequente Verwendung von em innerhalb des Containers für alle width und height Angaben, konnte ich die width und height Angaben deutlich vereinfachen. Für die font-size auf dem Container habe ich am Ende die clamp-Funktion verwendet mit rem, vw und em (also relativ umständlich). Dadurch konnte ich aber in dem Container alles mit em relativ sauber halten. (Btw.: clamp ist einfach genial ;) )

[@timdienstplaner1104]

Ab Oktober 2022 unterstützuen vw, vh, vmin und vmax und auch rem fast alle Browser. Opera Mini und IE sind da raus. 😃

[@marcokronenwett5502]

HI Johannes, wie immer cooles Video.......Hab mir mal wieder deine Website angeschaut und bin über einen Rechtschreibfehler gestollpert. Unter -> Leistungen -> Web Entwicklung -> Website Programmierung hier steht Ihnen ohne "h". Ansonsten mache weiter so......ich freue mich jeden Sonntag auf dein Video. Gruß

[@UnleashedDesign]

Danke :P aber die Inhalte dort werden "hoffentlich" bald von mir überarbeitet es fehlen auch noch diverse Projekte und einige Funktionen die noch nicht offen sind. Leider fehlt aktuell etwas die Zeit diese Änderungen vorzunehmen :D

[@m42ears]

Hmm, also das Video ist zwar schon 7 Jahre alt aber em und rem gibt es immer noch. Und zwar zu recht wie ich finde. In deinem Beispiel mit der "Problematik" Kindelement brauchst du doch nur eine Schriftgroesse fuer das Kindelement anlegen und schon gibt es keine Probleme mehr. Denn meines Wissens bezieht sich em immer direkt auf das Elternelement in dem es sitzt. In deinem Beispiel hat das Elternelement die Schriftgroesse von seinem Elternelement geerbt. Und nun mal ein Beispiel warum em wirklich brauchbar ist und zu recht noch existent ist. Also, du hast ein Elternelement "A" mit einer rem Angabe. Die rem leiten sich direkt von der Standardschriftgroesse des Browser ab wenn es nicht im Body oder HTML Element explizit angegeben ist. In diesem Element "A" ist einer weiters Element "B" mit einer em Angabe fuer die Schrift. Jetzt sollst du irgendwann deine Konstrukt responsiv gestalten. Und da zeigt sich der Vorteil von em. Denn ich muss die Schriftgroesse fuer "B" nicht mehr anpassen sondern nur noch die fuer "A". e Voila. Macht Sinn oder?

[@darxoonwasser]

Wieso sollte man auf den IE acht geben? Wieso sollte man ihn benutzen? Wieso sollte man ältere Browser/ältere Versionen von Browsern benutzen? Updaten hat doch nur vorteile. Ich weiß nicht was man da zu meckern hat. "Aber Methode XY kann vom IE mitgeliefert für Windows 2000 oder früher nicht dargestellt werden!" ???

[@UnleashedDesign]

Das hat einen ganz einfachen Grund ;) die % Anzahl an Usern auf der Website die damit arbeiten z.B. wenn man für ein Bauunternehmen eine Website baut werden sehr viele Mitarbeitern von Ämtern usw. auf diese Seite gehen. Dort läuft WinXP was heißt die nutzen mit sicherheit Explorer 9. Die können das auch garnicht ändern, das gleiche gilt für z.B. alles was mit Banken, Versicherungen oder Recht zu tun hat dort sind teilweise über 50% der Zugriffe von IE. Wenn die Website des Kunden hier nun 50% der User nicht korrekt gezeigt werden kann und so Aufträge nicht zu stande kommen geht es halt ins Geld. Daher muss man ihn immer nutzen auch wenn man es nicht will ;)

[@ahadaha155]

So viel zur "angeblichen (wenigen) Unterstützung" der Maßeinheit "rem" (= root-em) in Browsern: ;-) :-D caniuse.com/#search=rem

[@UnleashedDesign]

da hatte ich wohl noch einen alten Stand, wobei ich bei IE 9 und 10 bei einem Projekt im November letzten Jahres große Probleme deswegen hatte :/

[@ahadaha155]

Macht ja nix, kann ja mal vorkommen. ;-) :-D ... um den Slogan einer (Fernseh-) Werbung zu zitieren. ;-) --> EINE ANDERE FRAGE: Was hältst du von (beispielhaft/bildlich genannt) "style.css.PHP"? ... Oder sollte man sich - wenn man's ernst meint ;-) - dann eher SASS/LESS "verschreiben"? LG :-)

[@michaelschiessl3519]

@@ahadaha155 Die Seite kannte ich noch nicht. Danke dafür.