Was? Moin zu einfach komplex.
Folge 55 mit Burkhard und Gerrit und Burkhardt Moin Gerrit So.
Genau, Leute, ich habe es vor 2 Wochen schon gesagt, wir sind
auf der Hannover Messe vom 22 bis 26 April, freitickets gibt
es wieder in den Shownotes einfach auf den Link klicken
könnt euch ein Ticket auf die heißen Wer einlösen und vorbei
kommen Kaffeetrinken freuen wir uns drauf.
So jetzt soll es losgehen mit CSS heute Cascading Stylesheets
die mir bekannt sind aus HTML und CSS das kommt immer so im
Doppelpack daher, also zumindest wenn man mal irgendwie.
Versucht hat, eine Website selber zu erstellen oder sowas
und da sagte Burkhard aber du sagtest Burkhard CSS müssen wir
alleine behandeln, wieso denn eigentlich ist das kommt das
auch mal allein daher oder ne? Ne, das kommt da eigentlich nie
allein da. Ja, das ist ja die, ja, das ist
die Anmal, die Anmalanleitung für das html, deswegen sagt man
immer HTML und CSS, also ohne HTML bringt sie nichts, da
kannst du hinschreiben, hat aber keinen Wert.
Aber du sagst, CSS ist so wichtig und da gibt es so viel
zu wissen. Das war mal eine ganze Folge
machen. Ja, auf jeden Fall.
Ich mache auch schon ein bisschen CSS, ich glaube, ich
habe immer noch nicht alles benutzt, was das Ding kann, ja
ziemlicher Wahnsinn. Es ist halt wie.
Ja, du kannst das von den Frauen ne, also es ist wieder
klamottenschrank. Ja von den Frauen, also der
Körper selber ist mal das HTML der nackte Körper.
Ja hat ne Hand an Kopf n Fuß n Bein n Bauch n Po, das sind so
die Tags sage ich mal das ht m Ls also wir haben den heading 1
Setting 2 wir haben p tech für Paragraph also für Text also das
HTML hat keinen Anspruch darauf wie es angezogen ist, sondern es
ist Content Inhalt, also der Körper an sich.
Könnte. Sein oder auch ein Mann sein
kann ne Frau sein, ja, na ja, die Männer haben nicht so viel
im Kleiderschrank, deswegen hab ich TSS jetzt mal mit der mit
dem Frauenkleiderschrank. Ich glaube, da gibt es solche
und solche. Ja gut, im Schnitt würd ich
sagen, also jedenfalls bei mir und meiner Frau ist der
deutliche Unterschied und deutlicher Unterschied.
In den Quadratmetern. Aber ich kenn, wie auch immer,
es ist ein bisschen ein Beispiel, aber es ist gar nicht
so schlecht, das Beispiel, denn genau, selbst bei gleichem
Content kannst du, je nachdem was du für ein TSS dem Content
anziehst, die Figur, die danach rauskommt, den Mann oder die
Frau sehr, sehr unterschiedlich aussehen lassen, ja so, dass man
fast gar nicht mehr erkennt, dass das mal die gleiche, dass
das eigentlich genau der gleiche Inhalt ist.
Ziemlich krass genau und deswegen HTML und CSS zusammen
und CSS ist halt extrem mächtig, so mächtig wie alles Gedöns.
Also du hast ja Hosen, t Shirts, Röcke.
Armbänder und so weiter und du kannst sogar das nicht nur
statisch beschreiben. Im CSS gibt also auch mit den
neuesten Versionen die Möglichkeit zu sagen, wie sich
auch irgendwas bewegt, dreht, skaliert.
Von vorne nach hinten rutscht also vielleicht da der Vergleich
irgendwie was weiß ich. Dann Klamotten.
Also würde sich jetzt drehen und bewegen, keine Ahnung,
propellerhut Propellerhut genau ja gar nicht schlecht, ja.
Ja oder irgendwie so ne Art Smartwatch da irgendsowas wo
irgendwie welche Farben leuchten oder was weiß ich ja genau ja
nee das ist so Gerrit hast richtig verstanden, ja und weil
das so tief ist und so viel gedünst da drinne steckt hab ich
gedacht wir leuchten da mal mit der sogenannten
Techniktaschenlampe einmal kurz drauf, dass man so ungefähre
Ahnung hat, was ist das eigentlich mit?
Dem CSS. Cool.
Das heißt, wir gucken uns n bisschen an, was damit geht und
vielleicht zum Start aber einmal ein bisschen zur Historie.
Ich hab kurz mal geschaut und CSS ist ja im Grunde so alt wie
das Internet, könnte man fast sagen.
Ja, aber das Internet ist ja auch so n bisschen bekannt
geworden durch die ganzen HTML Seiten ne und man also wenn man
jetzt HTML ohne CSS anguckt. Ja, dann sieht das halt aus wie
halt so ne Webseite in den ich weiß gar nicht.
Seit wann gibt es das Internet, aber wie die ersten Webseiten
halt aussahen, ziemlich grauselig ja, manchmal sieht es
wenn das CSS nicht lädt wenn man mal so ne zerschossene Seite
sieht, dann sieht man so boxen die so richtig lieblos aussehen
und der ganze Text ist irgendwie oben links gebündelt irgendwie
sieht richtig katastrophal aus, das ist der Effekt wenn CSS
nicht geladen ist. Wenn es nicht an ist, dann sieht
man quasi das nackte html. Weißt du, wer es erfunden hat,
oder? Nein, ich hab tatsächlich, ich
hab den Wikipedia Eintrag heute nicht studiert.
Ich wollte mich ein bisschen auf den Inder, aber gut, wenn du es
weißt. Ja, ein Norweger.
Der weiß natürlich nicht, wie man es ausspricht, aber da ich
sag mal der harkon veum li norweg.
Der auch unter anderem mit Tim Berners Lee CERN gearbeitet hat.
Unter. Anderem ja, da ist ja das
Internet auch entstanden. Genau da passt zusammen ja
richtig. Ja, das war 1996.
Ja, da hat er damit angefangen. Dann war das schon.
Ja ist ne Weile her, ja. War ich 16 oder 7?
Gut. Genug von der Geschichtsstunde,
aber da ging es auf jeden Fall los.
Ja, und da hat sich auch gedacht, ja, das sieht doch
alles ein bisschen blöd aus, nur das HTML, ich mach mal CSS genau
und das Konzept ist ne super, ist ne super Idee, halt
irgendwie die Visualisierung die UIUX zu trennen vom Content.
Ja das Macht hat schon immer viel Sinn gemacht, genau da
fangen wir mal an kurz was ist eigentlich CSS und wie kann ich
es benutzen? Also was es ist, haben wir ja
schon beschrieben. Und was es für eine Aufgabe hat.
Wie sieht es aus, wenn man es jetzt technisch anguckt, also
wenn ich so ein html Dokument habe, ein Dokument html Dokument
gleich html file also ich kann mir, ich kann ja ein html File
im Texteditor schreiben, ist ja nur Text, der muss halt muss
halt dem HTML Syntax genügen, das sind ja immer diese, das
hatten wir auch schon mal diese eckigen Klammern Sachen also ich
habe immer eckige Klammer auf dann kommt irgendein html Tag
zum Beispiel h 1 und dann kommt die Klammer zu.
Und dann kommt der entsprechende, der Titeltext.
Inhalt? Ja genau, und dann kommt der
schließende Tag. Ne schließen Attack hat wieder
so n kleiner Zeichen auf Slash und so weiter darum soll es aber
nicht gehen ja was aber wichtig ist, dass HTML an sich quasi
eine eine ja genestete Struktur hat.
Ne, du kannst ja quasi, du kannst halt mehrere Text
aufmachen und ineinander verschachteln und die dann
wieder zu machen, so aber in so einem HTML Dokument wird quasi
dann auf auf 3 verschiedene Möglichkeiten.
Kannst du dir auswählen? Je nachdem kannst du quasi dein
CSS verankern und ausdrücken. Ja und und diese 3 Möglichkeiten
sind ein externes CSS File zu verlinken und das tut man in dem
in dem also wenn man jetzt ein html Dokument hat, das teilt
sich erstmal ganz auf der ganz obersten Ebene in Header und ein
Body ist das vielleicht auch schon mal gesehen.
Habe ich schon mal gesehen. Ja genau, es gibt immer so ein
Header Tag und da stehen so Header Gedöns Sachen drinne.
Du schreibst sie zum Beispiel wie der Viewport ist und wie
vielleicht eine Anwendung heißen soll und so weiter sind also
Sachen die jetzt nicht gleich direkt auf der Seite rendern,
sondern. Mit einem Favicon.
Und was steht da oben in einem Browser, wie das heißt und so
weiter und im Body steht eigentlich der Content auf für
die Seite so ne. Also da kommen dann diese ganzen
h 1 Diff und so weiter aber im Header darum geht es also wenn
es extern verlinkst das kannst du dir so vorstellen tatsächlich
wie ich hab n Kleiderschrank. Mit den nur bei dem Beispiel zu
bleiben, mit den ganzen Klamotten drin, die das CSS
beschreibt. Dann sage ich ihr, liebe liebes
HTML Dokument, da hinten steht mein Kleiderschrank, den nimmst
du bitte ja, und was heißt das jetzt in Text, Sprache, da kommt
ein Link Element rein und in dem Link Element steht der hat 33
Attribute wie man so schön sagt, da steht rel type und href.
Heutzutage sind in einem Link Element nur noch die Attribute
href und rel notwendig anzugeben.
Der Typ des verknüpften Dokuments, der durch Type
ausgedrückt wird, ist standardmäßig auf CSS.
Und Rell, da steht da da quasi so n stylesheet, damit dieses
linkeding weiß, oh ich bin n stylesheet Link ja.
Oder nochmal das href. Da steht dann quasi der Link
drin, also wo das wo das CSS Licht aufrufbar von irgendeiner
Stelle. Ja und dann wird dieses ganze
CSS file eingeladen und angewendet.
Ja das ist die externe Möglichkeit es zu einzubetten.
Und dann gibt es noch ne ne weitere Möglichkeit ist intern
einzubetten, also quasi in die in den Header auszuschreiben.
Dann benutzt du sogenannte Style Tag Style, Tag auf und dann
schreibst du CSS runter quasi live in dem HTML Dokument.
Ja, da das schreibst du. Aber im Header sagst.
Du fragst, schreibst du bei dir, kannst du dich immer wieder
drauf berufen, also egal ob das jetzt extern ist oder mit
drinne, aber du richtig, das ist sowieso so genau, also entweder
verlinkst du es extern oder du schreibst es intern in den
Header rein und und dann benutzt du quasi da.
Genau, du benutzt benutzt es quasi in dem in dem Body und in
den. Also n Beispiel, da steht zum
Beispiel h 1, ist dann grün oder so.
Ja, genau so sieht es aus. Genau, tatsächlich kommst du
ehrlich später gemacht, aber genau du hast immer n Selektor,
zum Beispiel h 1, dann geht ne geschweifte Klammer auf, dann
kommt der sogenannte sogenannte Property, die TSS Property zum
Beispiel Background Color und dann der Wert davon Queen
könntest du machen, tatsächlich ja und dann kannst du sagen
Background Color jetzt bei h 1 ist blöd, da müsstest du color
nehmen, wenn du wenn du den Text anfärben willst ist ja meistens.
Sonst hast du, hast du den Hintergrund grün und der Text
ist irgendwie so ne. Also hast du also Color Green
genau und dann und dann könntest du sagen später in deinem H 1
Element kannst du einfach das hinschreiben und alle h 1 sind
dann halt grün, so funktioniert es tatsächlich.
Ja, also ist der interne Weg es aufzuschreiben und dann gibt es
noch den sogenannten Inline weg, der Dritte.
Da schreibst du es dann quasi nicht mehr in den Header,
sondern direkt an das Element, was du stylen möchtest.
Also wenn wir jetzt bei dem h 1 bleiben, sagst du halt h 1 auf
und. Und dann gibt es n spezielles
Attribut, was in den, was in dieser Tager mit rein muss, das
heißt Style, dann sagst du, Style ist gleich und dann
schreibst du direkt inline, deswegen heißt es so inline das
CSS in ne, also in diesem Fall Style ist gleich
Anführungszeichen oben geschweifte Klammer auf Color
doppelpunkt, Green Semikolon, geschweifte Klammer zu rums ja
und dann ist aber auch nur dieses h 1 wo es drin steht grün
und alle anderen denen ist das Wurst.
Da habe ich jetzt direkt 2 anschlussfragen.
Schieß los. Was ist denn die Best practice?
Also mache ich das. Mit einem externen verlinkten
Stylesheet oder file oder mache ich das alles im Header im
Dokument selber im html Dokument oder sogar inline?
Und welches ist dann angenommen? Ich mixe ja was ist dann am Ende
das was die Oberhand behält und angewendet wird tatsächlich?
Sehr gute Frage. Die Antwort steckt schon im
Namen. Cascading Stylesheets bezieht
sich genau auf die Frage und die Antwort auf das Problem.
Es hat es gibt eine Prioritätenabfolge.
Wenn du alles 3 benutzt in in welcher Reihenfolge was los ist.
Aber das ist jetzt schon der zweite Teil deiner Frage.
Ich hab aufgepasst. Du hast zuerst gefragt, was ist
die Best Practice? Die Best Practice ist?
Ist alles 3. Es hat alles 3 seine relevanten
Zwecke. Manchmal willst du dynamisch
oder ganz kleinteilig eine bestimmte Sache ändern.
Du willst aus aus einem langen Paragraphen ein Wort in rot
schreiben und sonst nie irgendwo.
Dann machst einen Inline Style ja direkt in dem an der Stelle,
wo du es brauchst. Das Interne wird ganz oft
genutzt, wenn du so Bibliotheken hast, wo du so ganze Klassen
definierst oder Irgendsowas hat auch sein Relevanz, wo du ja so
so mittelgroße. Abschnitte deiner Webseite
einheitlich stylen möchtest und mit dem Externen, das ist ja so
der Kleiderschrank, da kannst du, da kannst du so das ganz das
die ganz großen Zusammenhänge machen wie wie rund sind meine
meine Borders im Prinzip ne so diese diese grundsätzlichen
Stylings du kannst du kannst ja sehr grundsätzlich sein, du
kannst den ganzen Buddy Styles kann man später auch noch zu du
kannst halt sagen alle Elemente die irgendwie eine Border haben
haben die halt leicht abgerundet ja oder alles hat eine ganz
sanfte Transparenz ja so ein bisschen Glow und so weiter das
könnte man sehr gut über so ein externes Teil steht dann laden
ja und dann kannst du dann kannst du auch verschiedene
Sorten von denen haben, dann kannst du halt sagen okay das
ist halt der eckige Style, dass du ein bisschen runderes Teil
von meinem Kram. Es wird alles 3 auch heute noch.
Benutzt und also ich würde nicht sagen, es gibt da irgendwie best
practice oder sowas. So eine schriftfarbe mal als
Beispiel. Also schwarze Schrift haben als
Standard, die würde ich dann ja, das würde ich jetzt.
Quasi entweder intern oder im Externen unterbringen.
Also das würde ich jetzt, man muss sagen, die die die inline
Styles, also wenn du immer direkt ans Dokument im Dokument,
das also im Element das Styles ist natürlich super praktisch,
aber es ist halt nicht Dry, das hatten wir auch schon mal ne
also dann repetierst du wenn du andauernd wieder das gleiche
machst repetierst du dich ja quasi don't Pete Yourself don't
we be yourself ja genau 3 also und plus es ist, das ist
vielleicht der wichtigste Punkt dabei, das können wir noch
sagen, ist egal. Es forscht sich ja, es geht um
eine html Seite, aber es ist. Die Performanz ist besser, wenn
du es in einem Stylesheet auf globalerer Ebene ausdrückst,
weil der Browser muss ja ständig deinen deinen Inhalt rendern,
andauernd ja in einer hohen Abfolge, im Notfall, wenn sich
das ändert, und dann muss ja einfach mehr Content parsen,
wenn das inline ist. Während also das ist technisch
immer noch so, dass es etwas besser für die Performance der
gesamten des gesamten Webauftritts ist.
Wenn du es externalisierst, also ja, also entweder.
Kern oder Examin? Und wer ist jetzt Vorrang?
Vorrang hat Inline inline, überschreibt alles ja und dann
kommen Internal und Externe gleichzeitig.
Er war nicht ganz gleichzeitig. Da kommt es auf die Reihenfolge
an, indem du es im Header definierst.
Ja, und der Letztere gewinnt ja, also würdest du quasi intern was
hinschreiben. H 1 ist h 1 Color ist immer
schwarz. Ja sag ich mal.
Und dann lädst du dann nach, also da drunter, quasi in der
Reihenfolge des des Codes des HTML Codes, quasi ein externes
Teil she 3 wo es sagt nein h 1 Farbe ist halt immer blau, dann
gewinnt blau, würdest du es andersrum machen und das Externe
zuerst laden mit dem Blau, danach intern definieren, dass h
1 immer schön schwarz ist, ist es schwarz und machst du gar
nichts, hast du gar nichts definiert für irgendwas gibt es
auch noch 1 habe ich mir nicht gesagt, es ist das Browser
default, die sind unterschiedlich je nach Browser
der so ne so ne für so bestimmte Sachen.
Ne, dass du zum Beispiel zum Beispiel ist ein Text, wenn du
nichts dazu sagst ist der immer schwarz, ja und nicht weiß, weil
meistens irgendwie, weil zum Beispiel auch wenn du nichts
dazu sagst halt die Background Color weiß ist ja also hat der
Browser drin stehen, Background Color ist mal weiß und Text ist
mal schwarz, da kannst du wenigstens mal was lesen ja also
wenn das beides weiß wäre ja schon ziemlich essig genau und
diese Defaults greifen halt wenn du gar nichts definiert hast
selber ja die kommen zum aber zum ganz und zu ganz zum Schluss
ja das ist die Kaskade quasi der Prioritäten.
Deiner Style Schieds und das ist auch ganz normal, dass sich dass
sich tatsächlich dieses Teilschieds in bestimmten
Attributen überschreiben, nicht so schlimm, ja, und und immer
wenn du mal was hast, was du, was du gerade nicht so willst,
dann kannst du immer diesen inline Style nehmen und das halt
über Brettern so, das ist schon gut gedacht.
Okay alles klar. Ja, genau so.
Und jetzt gucken wir mal. Wir hatten es schon ein bisschen
angeteasert. Wie sieht dieses CSS tatsächlich
aus, wenn ich es aufschreibe und das ist jetzt eigentlich egal,
ob es jetzt in den Pfeil schreibe oder ob ich es jetzt
quasi in diesen Style, also hinterher hinter diesem Style
Tag hinschreibe. Oder auch, ob ich es quasi
inlines schreibe. Und dann steht da halt Style
gleich, ja. Hat das eigentlich.
Hat das eigentlich die gleiche, den gleichen Aufbau und hat man
immer gleich hin und es ist immer so, dass es ganz am Anfang
sagst du erstmal wer ist mein der sogenannte Selektor auf was
bezieht sich dieses, dieses Element, das ist aber nur
richtig für Internet extern, weil wenn ich es natürlich
direkt schon an Element schreibe ist der Selektor klar, nämlich
dieses Element was ich da gerade angucke und dann kommt der die
kommt, die sogenannte Decklaration die Declaration
gliedert sich auf in ich würde mal sagen Key Value, aber ich
glaube im CSS sprech heißt Property und Value.
Und die Property ist die CSS pro Partie.
Davon gibt es sowas wie Background Color hat man schon
Font family, texteleien, padding margin Color border Borderradio
und die Liste ist wahrscheinlich, ich weiß es
nicht 300 400 Einträge lang an Properties die.
Die halt irgendein Style hervorrufen soll.
Richtig viele von ja und richtig viele muss man eigentlich auch
wissen. Ja und der Value ist halt der
Value, der bezieht sich immer auf die Property, der ist sehr
unterschiedlich. Ja bei Color gibt es zum
Beispiel kannst du ihn schreiben Red Queen Blue, also tatsächlich
ausgeschrieben als Twing, da kannst du aber auch diesen, das
kennen wir, diese diese in diesen Hacks Color nehmen, das
fängt ja mit dem Hash an so und dann hast du halt irgendwie zum
Beispiel Fffffffffff normalerweise sind das weiß dann
das weiß genau, das ist quasi in Hex codiert, die die Farbe, die
RGB Kanäle tatsächlich, das kann man mal kurz sagen, an der
Stelle ist eigentlich ganz lustig, nämlich ganz einfach.
Das ist quasi und RGB ist in 256 aufgeteilt, 256 aber als als
Hexadezimal ausgedrückt. Und im Hexadezimalen ziehen wir
immer bis nicht nur bis 10. Wir haben noch mehr Symbole
erfunden, nämlich ABCDEF nach der Neuen kommt noch ABCDEFA
steht für 10, b für 11, f dann für 16 und wenn der ff hast,
dann hast du quasi 255, das ist quasi der Dezimalwert zu dem ff,
zu dem Hex und wenn du alle 3 Farben anguckst, dann ist es
halt ff FF für. 3 Farbkanäle, also 255, 255, 255, volles
Programm überall und das heißt Halt weiß ja und 000.
Also wenn du 6 Nullen ein Donnerst, dann bist du schwarz
ja so und wenn du pur rot bist, dann hast du halt am Anfang da
stehen FF 0000 hast du halt rot. Ja das hat jetzt mit CSS nichts
zu tun, sondern wie man die Farben kodiert aber wollte ich
nur mal kurz sagen, ist nämlich auch keine Raketenwissenschaft
so ja. So, und dann kannst du auch
immer sagen, noch RGB Klammer auf Klammer zu und dann gibt es
halt die RGB Dinger ein und so weiter genau und aber wenn du
zum Beispiel sagst Margin, dann gibt es auch mehrere Sachen, da
kannst du sagen Pixel oder in Prozent und so weiter aber das
ist alles dokumentiert, ist halt irgendwie aber Value bezieht
sich halt immer quasi auf die Property die ich gerade habe.
Und diese Properties, du sagst, da gibt es ein paar 100 war es
das? Dann kann ich damit alles in
meiner auf seiner Website durchstylen oder gibt es da noch
Sachen, die ich noch. Andere Dinge, die ich weiß ich
nicht erfinde, erschaffe dich noch ausstylen könnte irgendwie
Animationen ganz besondere schaffe, die dann passieren noch
keiner vorgesehen hat im CSS. Ist eine sehr gute.
Frage. Heißt es so, dass da.
Würde ich sagen, kannst du mit CSS fast alles erschlagen.
Es gibt auch so Leute, die haben so richtigen schwarzen Gürtel
sag ich immer im CSS und die machen die krassesten Sachen es.
Ist aber ein ein Kompetitor zu dem CSS.
Das ist Java Script. Jetzt muss er einmal kurz
verstehen, wie funktioniert das eigentlich.
Also wenn ich jetzt HTML und CSS aufschreibe in so ne Seite, dann
hab ich das ja quasi schon zur Design Zeit Informatiker sagen
wir mal compilet Timer, also zur Entstehungszeit statisch
festgelegt was los ist sieht das Ding aus wenn der Browser das
dann also ich kann ja so ein html Dokument fertig machen,
speichern und den Browser zum Laden schreibst du html dran und
zeigst dem Browser das Latas so ja kannst du das ja angucken,
ist ja easy ja und dann kann da trotzdem was animiert sein und
so weiter weil CSS auch in der Lage ist Animationen
auszudrücken aber ich kann es als letzten Tagesordnungspunkt
heute so und eigentlich kannst du damit fast alles machen.
Jetzt aber doch Sachen, die du vielleicht wo du sagst so okay.
Das hat die 340 Sachen, die ich irgendwie noch machen will, die
hat es erst noch nicht vorgesehen.
Jetzt kannst du mit Java Script ja immer alles manipulieren,
also Java Script ist eine Programmiersprache und die kann
Sachen zu Run Time. Also während das quasi läuft,
während der Browser das Rendert, kann die wilde Sache machen.
Ja, du kannst sagen nach 10 Sekunden, dass die Seite
angezeigt wird, nimm halt manipulier halt den CSS Eintrag
da wo Green steht schreibst du jetzt halt rot hin.
Dann machst im Prinzip passiert nichts anderes als das Java
Script als Programmiersprache dir das umbaut live ja und der
Browser muss das Schlucken, ja. Und das hat man früher noch viel
mehr genutzt. Das Javascript für dynamisches
Stylen und so und für Animationseffekte.
Und und das CSS hat aber nachgerückt, weil im Prinzip ist
es n bisschen hacky, wenn du zu viel javascript machst um zu
stylen, dafür ist es ja eigentlich nicht gedacht ja
sondern javascript ist mehr so für die für die richtige
Businesslogik ja damit willst du eigentlich Daten abholen aus dem
Backend und so weiter und sofort ja.
Das ist, und deswegen hat das CSS immer mehr auch von diesen
Funktionalitäten zu früher mit javascript gemacht, hast
übernommen und im CSS 3 gibt es wirklich viele Möglichkeiten
ohne Javascript das zu machen. Und immer wenn du nicht
javascript nimmst um zu manipulieren ist es auch noch
schneller, weil CSS Halt n Standard, den kennen die Browser
alle, alle browserhersteller müssen sich da richten müssen
das implementieren können heute ist das war auch nicht immer so,
also die zwischen Theorie und Realität gab es da immer auch
schon eine Diskrepanz, es konnte halt nicht immer jeder und
musste auch CSS Hacks einführen für bestimmte Browser und so
weiter gibt es. Mit minus Mozilla und minus
irgendwie Internet Explorer war da mal ganz schlimm.
Ja, ist heute viel besser und wenn es das im CSS gibt, ist es
Best Practice, dass man es dann auch nimmt, weil es meistens
viel schneller performt und. Ja, cool.
Genau, was haben wir gesagt. Also wir haben jetzt gesagt, was
ist CSS, wie kann man es definieren, diese 3 Wege inline
externe und internal. Es hat alles eine Priorität und
eine Reihenfolge, deswegen heißt das Cascading Wir haben uns
angeguckt, was ist ein Selector. Das mit dem Selector habe ich
eben gerade gesagt, nicht genau verstanden, aber genau da sind
wir auch noch nicht fertig. Auf was es sich beziehen soll im
HTML. Der Selector hat auch noch mal 3
Möglichkeiten, wir haben jetzt die haben jetzt den ersten
einfachen Fall genommen, wo ich sage als Elektor zum Beispiel in
so einem Stylesheet, also beim beim beim Inline Style ist das
Selector ja ganz klar das Ding was du gerade wo das da gerade
dransteht. Wenn du jetzt aber einen
Internet interne oder ein externe Style shit hast ist ja
nicht mehr klar und im einfachsten Fall sagst du Halt
ist alle H Einsen sehen halt so aus, alle PS sehen so aus.
Ja du nimmst quasi, dass der Selektor quasi identisch zu dem
HTML Tag den du den du stylen willst.
Der kann ja aber tausendmal auf der Seite vorkommen.
Ja hast ne große Seite, hast ja zig Paragraphen da drin ja da
geht NP auf und wieder zu Norm p auf und noch wieder zu, dann
kommt irgend n Tiff und dann geht wieder NP auf den PC und da
sind die alle gleich aus das reicht nicht um um gut zu
stylen, deswegen gibt es mehr Selektoren du kannst auch dich
auf eine ID beziehen was jetzt eine id.
Das hat alles mit HTML zu tun. Also du kannst quasi im html Tag
sagen, zum Beispiel so ein p Tag im Paragraph tag kannst du sagen
id ist gleich. First Night.
Jetzt gibst du einfach diesen Paragraph, eine ID, die muss
unique sein für dieses ganze Dokument.
Ja, und damit identifizierst du jetzt dieses Element ja und
sitzt auch mal völlig Wurst ob das NP oder n Diff oder
irgendwas ist. Ne das ist auch über die über
die verschiedenen Elemente völlig egal.
Es hat eine ID UNIQUE zu geben auf diesen Dingen ja, also es
könnte eine geben, die dürfen sich halt nicht wiederholen und
dann kannst du einfach im CSS dich auf eine ID beziehen als
der Lektor und dann schreibst du dahin hash unsere Raute die wir
immer benutzen wenn wir irgendwie bei linkedin oder
irgendwas machen. Nee bei Linken ist nicht nur
doch bei Linken ist auch diese tags also beim CSS gab es das
Halt auch schon immer. Und das halt diese Raute.
Und dann sagst du halt id. Also wenn ich jetzt im html
Hinschreibe p und dann sage ich id ist gleich First Name, dann
kann ich im CSS hinschreiben, Raute first Name und dann mache
ich meine geschweiften Klammer auf und Style los mit property
dann sage ich Color Green margin 4 Pixel oder irgend sowas und
dann wird genau das Element was diese id hat gestylt und sonst
nichts das ist die zweite Möglichkeit und die dritte
Möglichkeit sind die Klassen classes.
Du kannst halt auch einem html html Element eine Klasse
zuweisen von der klasse Button. Wow, das ist ja es ist der Apply
Button, bisschen bisschen zu generell also sowas.
Wie die Call to Action section. Oder sowas.
Also was du immer ganz anders auf einer Webseite bestimmte,
unter den Futter oder sowas. Ja genau, also quasi im Prinzip
ist das ist, das ist die Class, also während die ID ein einziges
Single id Style ist, ist das Expliziteste während der Tag
Name alle von der gleichen Tags Orte stylt ist es auch und die
Klasse ist dazwischen alles was diese klasse hat kriegt dann das
Teil und die Klasse drückst du auch wieder aus im html Element,
da sagst du halt nicht nicht id man sagt Halt Class ist gleich
und gibst dem Klassen Namen. Ist auch Wurst welches Element
das ist? Ja, du kannst die gleiche Klasse
an verschiedene html Elemente machen.
So, und das ist eigentlich und wenn man es dann in der also
jetzt klingt, jetzt alles sehr abstrakt, wenn man es aber live
nutzt, hast du mit diesen 3 Möglichkeiten alle scharfen
Waffen in der Hand um sinnvoll so ein Dokument zu alle diese
Cases gibt es. So n.
Sind Dinge sinnvoll zu teilen? So ja und die Klassen immer um
das noch zu sagen, die Du schreibst auf die Klasse einfach
hin, ne Klasse ist gleich call to action Button oder
Irgendsowas und im TSS sagst du im Selector sagst dann Punkt ist
wichtig der Klassenindikator ist Punkt Call To Action Button und
dann wieder geschweifte Klassen dings auf also um das motivieren
wir haben Selektoren die sagen wen soll ich denn hier stylen,
welchen Content und das auszudrücken gibt es 3
Möglichkeiten. Einfach über den Tag Name vom
html Tag über die explizite ID die zugewiesen sein muss oder
über die Klasse, die du selbst definiert hast im HTML.
Ich weiß nicht, ob du noch drauf kommst auf das Thema, aber ich
denke gerade so darüber nach, wie Styling von Webseiten früher
war und wie es heute ist. Insbesondere wie es früher war,
weil heute kann ich dir sagen, benutze ich, benutzen wir ja no
Coat website Baukasten und da gibt es vorgefertigte Elemente
und hinten wird schon noch letzten Endes das Html erzeugt,
also die HTML Files und die CSS Files, die gibt es.
Wahrscheinlich auch Inline CSS. Wenn ich dann ganz bestimmte
Sachen doch lieber noch rot machen möchte oder fett oder was
auch immer. Aber wenn ich mir das jetzt
vorstelle, dass ich das jetzt früher gemacht habe, ja
Webseiten zu stylen, das ist ja gar nicht so einfach gewesen,
oder konnte man das wirklich zur Compilet Time zu Bild Time auch
immer direkt sehen, ja. Da kannst du ja beim Browser.
Also es gibt ja heute mit den ganzen Visual Studios und ids
auch mit den, Wir hatten es ja gesprochen, auch die Developer
Tools, vor allen Dingen gerade da du kannst.
Du kannst mit der blanken html Seite anfangen und.
Und du machst das CSS quasi im Developer Tool und der zeigt dir
live was passiert. So, und das war früher auch
schon so, also das war immer alles so relativ live.
Ja, heute wird es wird immer alles angenehmer, je weiter wir
in der Zeit fortschreiten. Aber das war schon früher auch
ziemlich usabil. Ja und und das Laden von der
Website, das ist ja, das muss ja nichts kompilieren, das ist ja
alles direkt interpretiert, ja, also das ist schon nicht das
Problem, aber ich verrate dir ein sahniges Geheimnis, selbst
in unserem Low Court und so weiter und wir haben ja auch so
ein, wir haben so einen Knopf, wo du die ganze Ci usw
einstellen kannst. Aber was wirklich passiert ist
und wir benutzen dann library, das ist auch kein Geheimnis.
Die heißen Dev Xtreme und du hast, da ziehe ich Widgets drin
und so weiter sehen alle toll aus, es wird aber ein riesiges
externes externes Stylesheet erzeugt, riesengroßer das alles
definiert wie jeder einzelne Button aussieht und so weiter
für verschiedene Widgets und so weiter gigantisches File, die
sind auch manchmal richtig groß, also da kannst du richtig lange
scrollen bis da wieder zum Boden kommst.
Ja und dieses Stylesheet wird dann live eingeladen und stylt
hier und so kannst du zum Beispiel so eine ganze Corporate
Identity machen, wenn du sagst immer eine Akzentfarbe ist das
und so weiter das ist in diesem Style sehr sehr elegant
ausgedrückt. Formt quasi den gleichen Content
um, aber macht dann quasi alle Hintergründe aller Buttons ein
bisschen orange in der CI Farbe und so weiter und sofort.
Ja, das passiert tatsächlich heute immer noch.
Also das CSS ist nichts was. Was heute anders ist, dass du
quasi das nicht mehr so per Hand editieren musst.
Es gibt auch zig Bibliotheken. Heute sind richtig gut.
Also ich sag mal so einen muss ich nicht merken.
Ja es gibt so CSS Bibliotheken die die dir so auf einer höheren
Flugebene auf einer höheren Abstraktionsebene, wo du einfach
nur noch so ein bisschen sagst, ich will es ein bisschen runder
haben, ich will es mit der Akzentfarbe haben und so weiter
dir schon sehr gute Templates machen und du sagst so
Standardabstände und so weiter für so ein.
Es gibt ja immer so ein bisschen so ein Look and feel sage ich
mal so ein einheitliches und dafür gibt es Bibliotheken die
dir da quasi die CSS Arbeit sehr stark erleichtern und schon
quasi das CSS für Dich erzeugen du kannst immer noch das CSS per
Hand manipulieren, ne, aber die haben ja quasi schon sehr gute
Defaults und eine dieser sehr bekannten Library Stars talewind
so das ist ne Libri die die kann quasi mit der kannst du quasi
CSS erzeugen indem du es auf einem höheren Level ausdrückst.
Ja, dann weiter im Programm. Wird weiter im Programm.
Genau jetzt also wir haben die wichtigsten Sachen, haben wir
schon drinne, ich will vielleicht noch mal so ein paar
wichtige TSS Properties durchgehen, die man machen kann,
also zum Beispiel die also ganz wichtige Sachen sind ja immer
Farbe und Frontart und so weiter.
Ja und wo ich immer irgendwie so mit Struggler ist sowas wie ab.
Ne Abstände genau gibt's dann Padding und Margin.
Ja genau, vielleicht noch mal ganz kurz klarstellen was da was
ist. Ja genau, aber nicht brauchen
wir nicht allzu lange drauf rum, nee aber aber das vielleicht
dann noch mal wichtig zu sagen, es gibt nämlich weil das alles
mit HTML zu tun hat, müssen wir jetzt einmal kurz zu HTML
Rübergucken. Und auch 2 Sachen verstehen im
HTML. Also es gibt es gibt ja HTML
Elemente, die sind also sowas wie p oder IMG, also für Image
ne oder h 1 h 2 für für Headings das sind ja alles so Elemente wo
ganz klar ist was ist. Also das sind ja quasi Elemente
die den Inhalt direkt irgendwie betreffen und es gibt aber
eigentlich nur 2 Elemente die so eine Art Containerelemente sind,
die muss man mal kennen das div und Bann.
Ich würde sagen, dass das noch noch bekannter ist.
Halt das div. Und jetzt müssen wir einmal kurz
verstehen, was der Unterschied zwischen also wenn ich sage
Containerelement, dann heißt das eigentlich nur ich kann halt
irgendwo diffyn schreiben. Und da drin.
Schreib ich zum Beispiel PPPH 1 und so weiter also ich ich neste
quasi n ganzen Satz von Parametern rein ne und warum
mach ich das weil ich dann quasi nen ganzen Satz von Anweisungen.
Ein ein einheitliches Styling geben kann oder das Rumrutschen
kann. Ne.
Also wir haben, wir haben ja heute in modernen Webanwendungen
haben wir ja immer sowieso ne Art Kacheln oder irgendsowas ja,
also ich passe bestimmten Content.
Zusammen, der dann quasi als Ganzes irgendwie, zum Beispiel
wenn der Screen kleiner wird, irgendwie in die nächste Zeile
rutscht oder irgendsowas. Dafür ist das ganz wichtig, so
eine Art eher strukturierende Containerelemente zu haben.
Html, damit ich das überhaupt ausdrücken kann, und das ist
halt das div. Und das Band.
Und wo sind die unterschiedlich? Im HTML muss man jetzt auch mal
kurz überlegen, wenn man jetzt nur HTML HINTIPPT ohne CSS, dann
gibt es 2 verschiedene Arten von Elementen, es gibt die inline
Elemente und die Blockelemente und ob irgendwas ein inline
Element oder ein Block Element ist, ist mit dem Typ des
Elements festgelegt. Und was der Unterschied zwischen
Inline und Blog ist? Ganz einfach.
Wenn ich ein Blockelement habe und ich schreibe quasi
untereinander blockelemente hin, dann sind die quasi jedes Mal
automatisch in untereinander, also in der nächsten Zeile.
Das ist Block und ein inline Element, wenn ich die
untereinander im HTML Hinschreibe, dann werden die
aber hintereinander gerendert in einer Linie.
Und das muss man halt wissen, welches Element was macht, wenn
man immer so ganz grob irgendwie das Teil.
Aber deswegen gibt es 2 strukturgebende Container.
Das Diff ist nämlich n Block Element ja das wenn wenn wenn
ich divs hinterschreibe sind die erstmal untereinander.
Und das Spam ist nämlich in nen. N Inline Element, danke für das
Wort, entfaltet genau und würde sich quasi hintereinander
schreiben. So, ja, das ist ganz wichtig und
wenn wir jetzt und wenn wir jetzt über Margin sprechen, dann
bin ich, deswegen hab ich jetzt kurz von von div.
Und span und von Inlinern und so weiter gesprochen, dann macht
man eigentlich die Margins gerne an.
Du benutzt relativ viele diese blockelemente du versuchst und
du hast auch Divs in Divesendives versucht halt
quasi. Content quasi immer zu rappen in
so in so bestimmte Einheiten. Ja, und dann kann zu dem gerne
mal n Margin geben. Ja dann haben quasi diese diese
Blöcke zueinander n bestimmten Abstand und es sieht schick aus
und es fließt nicht auseinander. Und und der.
Und der Abstand, den ein Objekt nach außen hat, das ist so, wie
wenn ich, ich sag mal ich bin n Objekt und hab ne bestimmte
Größe 100 * 100 Pixel sag ich mal ja.
So, und wenn ich jetzt sagen will ich hier ganz n anderen
Elemente der hier so Rumfleucht auf dieser Seite.
Ihr habt Gefährlichst zu mir nach außen 10 Pixel Abstand zu
wahren hier das ist ja meine Privatsphäre.
Ja das ist mein wie sagt man bei den Menschen immer hier so n.
Die Aura, das ist meine Aura, die kommt eben mal nicht rein.
Ja, das ist der, das ist der Margin.
Ja, es gibt aber noch n anderes Element.
Du hattest gesagt, das Padding ja, das definiert auch n
Abstand, aber das ist der Abstand nach innen, ne also wenn
wir jetzt stellen wir mal vor dieser dieses Diff ist einfach
ne Box, dann ist der Margin das was außerhalb der Box passiert
wenn es eine schwarze Linie ist diese Box und ich hab 10 Pixel
margin dann darf von außen keiner näher als 10 Pixel an
meine an meinen stricheren rücken an meiner Aura.
Und das Padding ist quasi alle Elemente die da drin sind, weil
ich bin ja ein strukturgebendes Element.
Also ich hab zum Beispiel gleich als erstes da drin irgendwie
eine Zeile Text und dann sagt das Padding, wie nah dürfen die
Elemente, die in mir sind an meiner Linie von innen
ranrücken, das ist das Padding, ja, weil es sieht auch richtig
Scheiße aus, wenn du, wenn du zum Beispiel tatsächlich mal ein
Differ hast, dem du ja mit dem CSS, mit dem CSS wohl border,
kannst du dem tatsächlich also typische Weise hat die keine
Border und sieht nicht ist alles ist einfach nur strukturgebend,
aber du kannst es anmalen, dann siehst du die border.
Und wenn du dir dann einen Text elementar reinmachst und gibst
dem keinen Padding, dann klebt dieser Text direkt an der Border
und das sieht richtig Kacke aus. Also gibst du dem Padding von
und das kann man sehr genau definieren, padding Top Padding
Left padding Ride, padding Bottom und dann gibt es eben
irgendwie sagen wir mal 8 Pixel padding nach innen, dann sei das
schon schick. So also die Box bleibt schon bei
100 * 100 Pixel, selbst wenn sie ein Padding hat.
Richtig. Nur was drin ist, wird halt
weiter zur Mitte verschoben, wenn Padding da ist.
Ganz genau. Und die Browser, und das ist
eigentlich, und das ist alles Verschachteln, passiert alles
gleichzeitig und die Browser machen das richtig gut das alles
zu machen und mit Padding und Margins arbeitest du den ganzen
Tag so. Ist das das Boxmodell?
Darüber habe ich ein bisschen gelesen bei CSS, das ist alles
in so. Boxen Container sind, die du
genannt hast. Das habe ich noch nicht gehört.
Das Boxmodell vom CSS aber ja, also es ist also es gehört sich,
also es gibt, es gibt da noch noch höhere Levels von diesen
ganzen Krams, aber es gehört sich so, dass du das also da
gibt es auch eine Kunst, gutes CSS hinzuschreiben, was kurz ist
und irgendwie alles schön macht, so, ja genau, also es gehört
sich eigentlich so, dass du immer relativ viele diffs und so
weiter verwendest um Sachen schön zu strukturieren.
Ich hab jetzt zum Beispiel auch gelesen, dass in CSS 3, also
meinst du ja noch die neuesten aktuellste Version, aktuellste
Version, sowas wie flexbox oder sowas drin ist.
Was ist das? Hätte ich jetzt als nächstes
gesagt? Ja siehste, das passt ja, also
sag mal Flexbox ist ultra wichtig, das muss man also, das
ist so, das ist so eine, das ist so ein Power Tool von CSS und
das baut jetzt schön auf, haben wir einen guten roten Faden
jetzt gerade gefunden, das braucht nämlich die Diffs, aber
das löst jetzt quasi dieses Problem.
Ich habe gerade gesagt inline und blockelemente.
Und es löst jetzt einfach das auf eine Flexbox da definiert
quasi das CSS wie der Krams fließt.
Das ist jetzt nicht mehr notwendigerweise untereinander.
Beim Diff kann auch schön nebeneinander sein und so weiter
man sagt auch, also man leitet das ein im CSS mit dem mit dem,
mit dem mit der Property Display.
Ja und man sagt tatsächlich Display, Doppelpunkt Flex wenn
ich jetzt zum Beispiel Hinschreibe.
Machen wir kurz mal inline CS. Ich schreibe also in div.
Als htt, als html Style gleich. Display, doppelpunkt, flex dann
drücke ich es aus, dass dieser Container.
Und alle seine Inhalte nach dem Flex Prinzip arbeiten so.
Ja und was ist Flex, was soll das überhaupt?
Ja, Flex ist für das Layouting da.
Ja also und jetzt muss man eine Sache wissen, wenn man man will
ja vermeiden als Entwickler, dass man jetzt für zum Beispiel
für jede Plattform für jeden Screen Ratio und so weiter
komplett den ganzen HTML Code und den CSS Code.
Jeweils Handy sein muss. Ja, dann musst du ja 3 oder 4
Sachen warten. Ja also Smartphone, Smartphone
gedreht, Tablet, Tablet gedreht, Desktop ja mit 4 K oder oder
Ultra HD und HD. Katastrophe genau, allein schon
größere und kleinere Bildschirme, Laptop.
Und ja, genau, und am besten Falle hast du einfach hast du
hast du deinen CSS und dein ganzes Layout so designt, hast
du mit einer einer Single Quelle, das ist alles
automatisch funktioniert und flex ist da ist da eine
Granatenlösung so ja das kannst du nämlich zum Beispiel sagen im
Flex, meistens sagt man es so, du hast du hast einen äußeren
Container, da sagst du jetzt da drin ist jetzt alles geflext so
und dann hast du da drinnen noch mehrere Container wieso eine Art
Kacheln und dann dann sagst du als erstes mal was für eine Flex
Direction habe ich also du bist erstmal wie sich diese inneren
Container ob. Horizontal sind oder vertikal.
Tatsächlich gibt es diese 2. Es ist Row oder Column, Flex
Direction Router column, das heißt du sagst jetzt jetzt
kommen meine Kacheln, jede neue Kachel die ich jetzt
untereinander schreibe, sie sind entweder nebeneinander oder von
vornherein mal untereinander, ist die erste wichtige
Entscheidung, du triffst. Und dann kannst du auf einmal
sagen, justify Content, align items und so weiter jetzt kannst
du sagen, diese Kacheln. Teilen Sie sich im Raum wie wie
nehmen die den restlichen Space, der auf deiner Seite ist und das
Macht alles Flex allein du musst dich jetzt also nicht mehr um
die Pixelgrößen von der Bildschirm kümmern, das heißt
alles alleine du sagst halt irgendwie, verteilt euch so im
Raum ja zum Beispiel distribute evenly ja.
Oder lass links, links und rechts maximal viel Abstand.
Ja und und mach dann innen drinne irgendwie n kleines
Spacing zwischen meinen Kacheln und so weiter das kannst du
alles ausdrücken, ja und du kannst dann auch sagen was soll
passieren wenn es mehr Kacheln gibt, weil die Kacheln haben ja
ne eigene Größe kannst du sagen ne also die Items so sagt man
das auch also du hast den den Container das ist der Flex
Container und alles was drin ist die Kacheln das sind die Items
und du kannst ja sagen die Items sollen schon eine feste Größe
haben vielleicht ja und was passiert denn jetzt wenn mein
ganzer Viewport wie man so schön sagt also der Screen kleiner
wird? Als die Items, die ich
ausgedrückt habe, dass die in einer Reihe sein sollten.
Das ist eine sogenannte Flex Rap.
Dann kannst du sagen okay, der Scheiß rappt sich halt dann ja
und dann fallen quasi von alleine die Boxen runter mit so
einem kleinen Animationseffekt, die sind dann passen nicht mehr
in eine Zeile, dann fallen sie in die nächsten Zeile, da kannst
du nur sagen Rap dich reverse oder Forward, da kannst du sagen
also das letzte Objekt nach unten oder das erste nach unten
und so weiter das kannst du alles auf einer ziemlich hohen
Abstraktionslinie mit diesem Flex CSS Krempel definieren.
Ja, und wenn du das gut machst und schön designst, dann kannst
du schon richtig viel im anderen responsive Design machen.
Das ist das Buzzword dazu. Responsive Design heißt es,
sieht halt immer gut aus, egal auf welchem Screen ich gucke und
tatsächlich ist Flex die Flex Technologie glaube Grundlage von
sehr sehr vielen ziemlich schicken Apps, die halt bei
gleicher Codebase sage ich mal gut sehen aussehen auf vielen
Screenshot das mal so ganz kurz um mal Flex abzuholen, jetzt
gibt es da noch was krasseres, angeblich habe ich aber selber
sehr wenig Erfahrung, deswegen erlebe ich mich nicht aus dem
Fenster, es gibt auch im CSS 3 das sogenannte Grid, also Flex
ist ja ein bisschen eindimensional.
Du sagst jetzt irgendwie du hast zwar einen Rapper Container und
dann hast du da drin eine Linie von entweder untereinander
angeordneten oder nebeneinander angeordneten Kacheln.
Das ist aber auch nicht ganz richtig, weil du kannst quasi
auch einen Flex Container haben, wo das Item wieder ein Flex
Container ist. Das habe ich auch gern gerettet.
Aber bist du noch dabei? Ja.
Also du kannst schon die Bilder noch so ein bisschen im Kopf.
Ich versuche es gerade alles vorzustellen, du kannst das ist
ja eine Grund, eine Grundeigenschaft des Hdml, dass
du es halt nesten kannst. Ja, also du kannst ja stapeln
und deswegen kannst du auch sagen, ich div.
Container auf, der auf der ersten Ebene bist du quasi hast
du Kacheln horizontal und in jeder einzelnen Kachel ist quasi
wieder ein Container. Für Unterkacheln, die auf einmal
aber untereinander sind, die dann columbice sind und und auf
diese Art und Weise kriegst du ja auch zweidimensionale
Strukturen zusammen. Ja, also und sowas wie Tabellen
und so weiter kannst du damit alles machen ja, aber du.
Wolltest wahrscheinlich sagen, dass Skript ist besser dafür
geeignet. Genau und.
Jetzt gibt es das Grid irgendwie und das hat, das hat von
vornherein so ein zweidimensionales
zweidimensionalen Charakter, ja, das heißt irgendwie, dass das
ist das, was es zu nutzen wäre, so, ja, ich löse das immer über
Flexboxen, wenn ich zum Beispiel Tabelle früher, also wenn du
einfach mal eine Tabelle hin machen willst, also mit CSS oder
überhaupt eine Tabelle einfach mal haben willst.
Im HTML war früher ein Riesenproblem und hat angefangen
mit mit Tablets quasi tatsächlich, es gibt ja das
Tablet. Das Table Element vom HTML, das
dafür da ist. Und dann gibt es Tableau und
Table Column. Du kannst ja alles definieren,
du kannst eine Tabelle aufziehen, die ist aber da
passiert. Großer Scheiß wenn du irgendwie
wenn der Platz nicht mehr da ist in der Tabelle und so weiter
deswegen macht man das eigentlich nicht mehr mit Table
also Table benutzt man einfach nicht zum Layout, früher hat man
halt das Table genommen um quasi in die Zellen dann irgendwie
wilden Content rein zu machen und.
Und um den um den irgendwie ne Struktur zu geben.
Ja, weil man nichts Besseres hatte.
Jetzt gibt es CSS 3 und jetzt machst du es gefälligst.
Jetzt benutzt du Tables quasi nur noch, wenn du wirklich ne
Tabelle hast. Das ist auch richtig, weil wir
wollen semantisch den Content klar haben.
Ja, es gibt ja auch Leute, die sind diesen blind.
Die müssen vertrauen, dass irgendwie die, die müssen halt
quasi wissen, muss ich jetzt hier ist es jetzt hier
inhaltlich semantisch tatsächlich ne Tabelle und ist
hier Content, den ich vorgelesen haben möchte oder wird hier ne
Tabelle gehackt um Informationen die eigentlich keine Tabelle
sind nur irgendwie in einer Art in in ne Struktur zu bringen in
so ner Art Grid, das macht man halt nicht mehr und wenn du
jetzt mit einem Flex Technologien Tabelle ausdrücken
willst, dann sagst du halt hier ist mein oberer Container und
der obere Container hat zum Beispiel hat erstmal eine
Columrichtung das sagt also quasi wieviel Rose hat die
Tabelle? In jedem, in jedem, in jedem
Column Kachel, in jedem colum Container, der ist gleich wieder
nen Flex Container, der ist aber horizontal.
Ja jeder einzelne und dem kannst du dann, den kannst du dann
wieder Sachen geben und dann beschubst hast ne Tabelle oder
sagst du noch die Tabelle darf sich zum Beispiel nicht rappen
oder sowas wenn es zu klein wird, dann darf die Role nicht
rappen, die muss sie halt irgendwie abschneiden kannst du
alles sagen, so macht man das quasi heute und ich glaube, dass
Grit könnte das vielleicht noch eleganter kann ich euch aber
nicht erklären, habe ich ja, habe ich einfach noch nicht so
viel benutzt. Genau.
Und jetzt sind wir fast durch. Jetzt gibt es noch, ihr merkt
schon eine CSS nur was wir am Anfang gefragt so wow was muss
man das extra erklären, so gibt es also was man vielleicht immer
sagen muss, wenn man sich das mal angucken will und einfach
echt keinen Plan hat von HTML und CSS und programmieren und so
dann halt immer noch mit f 12 im Browser mal oder untersuchen
also irgendwas markieren und dann mal Rechtsklick untersuchen
klicken oder Inspect glaube ich auf Englisch denke.
Ich mal ja genau. Und dann?
Kann man sich mal angucken, was an HTML und CSS eigentlich
dahinter steckt? Man kann das mal alles sehen,
ja. Tatsächlich sogar sehr, sehr,
sehr, sehr gut sehen. Weil also auf dem Style Tab vom
vom Developer Tools siehst du tatsächlich alle diese CSS, er
schreibt das auch hin, was ist von extern geladen und dieses
Cascading das das zum Beispiel kann ja sein, dass du extern
gesagt hast, alle h 1 sehen so aus und dann auf einmal was was.
In der Priorität höheres überschreibt quasi das h 1.
Ja und er zeigt dir sogar an, dass es überschrieben ist und
auch mit welchem Value. Ja, das schreit er sogar durch
und so weiter also das kann man wirklich sehr gut wirklich n
gutes Beispiel. Man kann es sogar noch live
manipulieren. Ja, du kannst ja auch, klar
kannst du auch da reintipeln und dann die Farben.
Werden. Du kannst es wirklich machen.
Du kannst mich vor allen Dingen dem ganzen Kram, den inline
Style geben, wenn du mal gucken willst, wie es das mache, ich
zum Beispiel ganz oft, eigentlich will ich einen
Stylesheet haben, auf Klassenebene zum Beispiel, und
da will ich mal vorher angucken, wie wird es denn aussehen und
dann kannst du zum Beispiel mit dem Developer Tools rangehen und
gibst halt dem Element, das du jetzt gerade mal über designen
willst, den Inline Style live, mit dem kannst du einenjekten.
Und dann, und weil das die höchste Priorität hat, passiert
das dann halt auch so. Du hattest noch irgendwas auf
dem Zettel, oder? Ja, ich hab noch 23 Sachen auf
dem Zettel. Eine wichtige Sache ist, jetzt
haben wir ja quasi nur über statisches anmalen gesprochen
und auch über Strukturiergebungen usw es.
Es gibt so coole Sachen wie Transformation.
Soll ich noch mal sagen. So manchmal sieht man das ja zum
Beispiel du Hammerst über irgendwas rüber und es dreht
sich irgendwie dreidimensional weg oder irgendsowas oder ganz
oft haben die Buttons so n Effekt.
Ne du kommst drüber gehovert und der wird so n bisschen größer
oder sowas und dann macht so n Schatten oder ja ich glaub ganz
viele neue Webseiten haben beim Scrollen ganz viel
Transformation. Ah ganz genau so und das kannst
du halt auch tatsächlich alles in CSS ausdrücken krasser weise
es gibt also mal es gibt mal die Transform Property und die hat
die hat du kannst also transformieren bestimmte
Eigenschaften zum Beispiel kannst du sagen Rotate Scale sq
ist quasi die. Sage ich mal und translate, ja,
dann kannst du zum Beispiel sagen, ich hab, ich hab jetzt
hier irgendwie n div. Ja und da drin ist irgendein
Knopf und dann sagst du zum Beispiel Transform translate.
Von 0 nach irgendwohin und auf einmal fliegt dieser Button quer
über deinen Screen. Ja, und dann kannst du natürlich
noch zu sagen, wie schnell mit, mit welcher Federung und so
weiter dann fliegt er da irgendwie im linearen Tempo oder
beschleunigt er langsam und bremst wieder ab und so weiter
das kannst du alles ausdrücken, ja.
Und wenn dir das noch nicht genug ist, dann kannst du
sogenannte Animationen definieren.
Das gibt es auch erst als CSS 3. Und das ist n also ist ne
Erweiterung tatsächlich. Also während Transform den
Gesetzen sag ich mal den ursprünglichen Gesetzen der CSS
regeln spricht, weil du es einfach ne Property ist, ne die
unternimmt unter dem Selektor läuft gibt es jetzt.
Ganz krasse Sachen, Animationen zum Beispiel.
Da hast du quasi außerhalb dieser normalen Selektoren nen
Spezialselektor, die fangen alle mit AT an, davon gibt es
mehrere. Ich nehm jetzt nur mal gerade
die Animation und dann steht da quasi at keyframes und den gibst
du n Namen. Und dann kannst du da sagen,
from too Dadrunter, also von bis, ja du kannst zum Beispiel
sagen from 0 to 1 und später beziehst du dich da drauf auf
diese Keyframes mit dem mit dem mit dem CSS Property, also
irgendwo in irgendeiner. Eintrag mit Animation Name, dann
sagst du da quasi my Animation irgendsowas ja die du vorher
definiert hast. Und da steht zum Beispiel 0 und
1, da kannst du zum Beispiel sagen, Opacity ja, da wird
irgendwas von 0 nach 1 transformiert n beliebiger Wert
Value beliebige Values werden transformiert, quasi von
beliebigen Keys. Ja und auf einmal wird was
transparent und kommt wieder oder irgendsowas und wieder und
so weiter du kannst ja also ne, du kannst dann auch sagen nur
bei 0. Du kannst auch in Prozenten
definieren, entweder sagst du From und Two, dann kannst du nur
sagen Duration immer im Kreis oder von 0 25% bei 50% 75% 100%
sieht so und so und so und so aus und du kannst das alles
ineinander stecken, du kannst also wilde Transformationen
machen, wo du gleichzeitig transparent wirst, die Farbe
wechselt und Skalierst und so weiter du.
Kurz ausgedrückt, man kennt es ein bisschen von, also wer
powerpoint Animation schon mal gemacht hat, so ähnlich ist das
ja. Also du kannst powerpoint, wenn
du wahnsinnig wirst, kannst du ja auch Sachen irgendwie von A
nach B fliegen lassen und das Stichwort wenn du wahnsinnig
wirst. Man muss natürlich immer ein
bisschen. Aufpassen bei den ganzen Sachen.
Ne und aber grundsätzlich ist natürlich cool, dass so viel
geht und funktioniert und genau ich finde es schon auf manchen
Seiten sehr sehr gut gemacht, irgendwie cool anzusehen, alle
übertreiben aber wenn man das richtige Dosis findet, wäre gut.
Ein powerpoint Design kann das in CSS umsetzt, dieses Gefühl
für eine UX, das ist ja auch nicht nur UI, das ist ja auch
wirklich UX was man CSS ausdrückst.
Weil, weil du auf einmal einfach mal ein viel besseres Gefühl
kriegst für die Sachen. Ja, das ist schon ganz cool.
Ja, ich glaube, jetzt haben wir, also das ist auch die Spitze vom
Eisberg, trotzdem noch gewesen, aber vielleicht.
Eine noch, die ich hatte ja gesagt, ich hab noch vielleicht
3 Sachen, also das war die eine Sache, war die Animation.
Es gibt auch noch eine die es mit diesem Add funktioniert, was
also quasi hinzugefügt wurde ist vielleicht wichtig, sogenannte
Media Curry nur für die Leute die das mal hören at mediacury.
Und das ist so ne Art Weiche für CSS.
Da kannst du quasi sagen, also das Atmedia Q.
Ich schreibst du oben drüber und und und.
Das hat ne Bedingung, du kannst halt sagen, wenn mein Bildschirm
die und die Auflösung hat oder so und so rotiert ist also Media
Curry heißt halt immer ich beschreibe quasi mit einer mit
einer festgelegten Art und Weise wie mein Viewport, also wie man
quasi meinen Schirm aussieht. Ich frage ich es ab oder ich
gucke erstmal nach, was habe ich denn?
Und dann überlege ich mir danach.
Was macht das Ding selbst? Du sagst halt, wenn ich, wenn
ich zum Beispiel kleiner als 1000 x 1000 Pixel Screen zur
Verfügung habe, dann nimm dieses CSS was jetzt kommt.
Und und oder oder so weiter kannst du ja viele mediacuries
machen und dann kannst du quasi mal wenn du mal nicht mit
flexbox also wenn du nicht Responsive Design machst mit
einem Code aber wenn du wirklich explizit sagen willst in diesem
Falle lasse ich sogar zum Beispiel ein ganz Element Weg du
kannst nämlich zeige ich gar nicht an weil es mir zu groß ist
das Bild zum Beispiel von einem Ich bin auf einem kleinen
Telefon und Ich würde jetzt hier ein Bild was ich sonst irgendwie
habe als zum anzeigen weil ich genug Platz habe will ich jetzt
gar nicht mehr anzeigen dann kannst du auch mit einem Display
gibt es auch setzt du einfach auf hin und schmeißt das ganz
raus aus der aus der ganzen Geschichte und zeigst es gar
nicht an. Dazu auch komplett irgendwie hin
und her schalten. Ja, das sind die Media Curies,
dass man es mal gehört hat und ganz zum Schluss noch eine
Sache, die jetzt eigentlich gar nicht dazu passt.
Hätte bisschen früher sagen können, es gibt an den
Selektoren sogenannte Pseudoklassen.
Denn es gibt ja so einen Effekt zum Beispiel, ich habe gesagt,
Hover, ja, das ist ja eigentlich ein Event, du kommst jetzt mit
einer Maus zum Beispiel über einen Link, ganz oft ist das so,
fast jeder Linke hat irgendwie so eine Psudoklasse dran und
dann willst du quasi den, dann willst du quasi diesen
unterstrich machen oder den Fett machen und ein hoher Event, das
drückst du aus mit Pseudoklassen, die sind von der
Struktur her sind Doppelpunkt, da kannst du sagen zum Beispiel
A, also im CSS sagst du dann a als Texte Lektor für den Link
Doppelpunkt Hover und dann definierst du jetzt irgendwie
blau werden lassen den Text oder irgendsowas wenn du drüber
Havas, da sind die Pseudoklassen oder nur?
Der Vollständigkeit halber. Und jetzt ist glaube ich mein
Spicker leer und euer. Soll kann man alles wunderbar
nachlesen. Wer das noch mal möchte und auch
mit coolen Tutorials, Videos und so weiter tatsächlich bei der
Quelle, überhaupt beim W 3 C einfach mal bei CSS reinklicken.
Was Burkert an dieser Stelle meinte, war die W 3 Schools, die
wir euch jetzt hier verlinken. Hat mit W 3 C nichts zu tun, nur
das W 3 NW 3 Schools steht auch für das www.also viel Spaß mit w
3 Schools prima, danke dir und in 2 Wochen gibt es uns wieder.
Ich glaube schon. Beim frischen Thema.
Ja, ein bisschen fernerer Zukunft, vielleicht auch noch
mal UX Ui Themen. Da haben wir gesagt, da muss CSS
vorher nochmal besprochen werden, aber dann dazu mehr und
für heute Danke fürs Zuhören und bis in 2 Wochen.
Danke für eure Ausdauer bis dahin.
Tschüss aus Hamburg. Einfach komplex wird präsentiert
und produziert von Highsomware. Wir freuen uns auf deine Fragen
und deinfeedbackanpodcast@heiseware.com
vielen Dank fürs Hören dieser Folge bis Dienstag in 2 Wochen
und Tschüss aus Hamburg.