nicht angemeldet
Matthias Scharwies
Matthias Apsel
Matthias Apsel
Auge
Der Martin
Der Martin
Matthias Apsel
Der Martin
Auge
Gunnar Bittersmann
Auge
Hallo Leute ich bin neu hier.
Ich habe ein großes Problem mit Schriftgrößen in mediaqueries und hoffe mir kann hier jemand diesbezüglich einmal Hilfestellung geben.
Nun zum Problem:
Ich habe außerhalb meiner Media-Queries einen Div#Container erstellt.
In diesem Dic#Container befindet sich Text. Dem <p></p>Tag habe ich eine ID zugewiesen z.B. so:
Rolf b<div id="teamname"><p id="typogross" class="typoklein">...das ist ein Beispiel</p></div>
Die Klasse .typoklein befindet sich in allen Media-Queries immer mit unterschiedlichen Schriftgrößen. Leider wird aber immer nur die Schriftgröße z.B. von:
@media (min-width: 320px) and (orientation: Portrait ) {
.typoklein {
font-size: 1em;
}
}
ausgegeben.
Ich habe auch schon versucht allen verschiedenen Schriftgrößen den Befehl !important zu verpassen nur das funktioniert auch nicht.
Ich hoffe ihr könnt mir helfen und bedanke mich im voraus.
Servus!
Die Klasse .typoklein befindet sich in allen Media-Queries immer mit unterschiedlichen Schriftgrößen. Leider wird aber immer nur die Schriftgröße z.B. von:
@media (min-width: 320px) and (orientation: Portrait ) { .typoklein { font-size: 1em; } }ausgegeben.
Ich rate mal, dass das die letzte ist und da es immer mindestens 320px sind, deshalb alle anderen Festlegungen überschrieben werden.
Im Wiki:
Das untere Tutorial zeigt, wie die media queries von schmalen über mittlere bis zu breiten Viewports angesprochen werden können.
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
.typoklein {
font-size: 3em;
color: red;
}
/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
.typoklein {
font-size: 2em;
color: blue;
}
}
/* Viewports mit großer Auflösung */
@media all and (min-width: 50em) {
.typoklein {
font-size: 1em;
color: green;
}
}
Herzliche Grüße
Matthias Scharwies
Hallo. Ich danke dir. Werde es gleich mal probieren.
Hallo. Also es funktioniert nicht. Ich könnte noch durchdrehen
Ich hab das jetzt mal so in der css gemacht:
/* Smart Phones und Tablets mit kleiner Auflösung umg. 320px */
@media all and (min-width: 13.333333333333334em) {
.typoklein {
font-size: 0.708em !important;
color: blue;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: left;
}
}
/* Smart Phones und Tablets mit kleiner Auflösung umg. 375px */
@media all and (min-width: 15.625em) {
.typoklein {
font-size: 0.792em !important;
color: green;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: left;
}
}
Was mache ich falsch?
Hallo fozzyozzy,
Hallo. Also es funktioniert nicht. Ich könnte noch durchdrehen
Funktioniert nicht funktioniert nicht als Fehlerbeschreibung.
Ich kürze dein CSS, sodass es dieselbe Wirkung hat.
/* alles was klein ist */
.typoklein {
font-size: 0.7em;
color: blue;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
/* -ms-transform: translateY(-50%); nur IE9 - so what? */
transform: translateY(-50%);
text-align: left;
}
/* Smart Phones und Tablets mit kleiner Auflösung umg. 375px */
@media all and (min-width: 16em) {
.typoklein {
font-size: 0.8em;
color: green;
}
}
Wie hast du deine Breakpoints ermittelt? Sie müssen sich nach deinem Inhalt richten, nicht nach dem Ausgabegerät. Siehe zum Beispiel https://wiki.selfhtml.org/wiki/Responsive_Tabellen
Ich gehe außerdem davon aus, dass die Farbe nur geändert wird, um festzustellen, ob die Mediaquery angewendet wird. Der Unterschied in der Schriftgröße von 0.1em sollte mMn. keine MQ nötig machen.
Das beste wäre, du zeigst die Seite.
Bis demnächst
Matthias
Hallo Matthias. Danke für deine Antwort. Das Beispiel was du mir schriebst hat ja auch schon Matthias Scharwies hier geschrieben und so habe ich es ja auch angewendet. Mir kommt es drauf an nicht die Farbe zu ändern sondern die Textgröße bei den Viewport aber eben nur speziell für eine Fußballtabelle.
Noch einmal zum Aufbau:
Im html-code steht folgendes:
<div id="table_leaque" style="<!--Style-->">
<div id="liga_tabelle">
<div id="platzierung"><p><!--Platz--></p></div>
<div id="teambild"><!--TeamBild--></div>
<div id="teamname"><p class="typoklein"><acronym title="(<!--TeamLang-->)(<--Team-->)"><!--TeamLang--></acronym></p></div>
<div id="tordifferenz"><p><!--Tordifferenz--></p></div>
<div id="punkte"><p><!--Punkte--></p></div>
</div>
</div>
In der CSS habe ich die DIV#CONTAINER außerhalb der Media-Queries definiert jeweils mit einer Breitenangabe in Prozent. Das funktioniert in der Darstellung bei den den jeweiligen Viewports auch ohne Probleme. Die Klasse .typoklein habe ich dann in den jeweiligen Media-Queries (320, 375, 414, 480, 568, 600, 667, 736, 768, 800, 1024, 1280) definiert nur es wird immer der Wert der Schriftgöße des Media-Queries 320 ausgegeben selbst dann wenn ich jeweils ein !important zuweise.
Hallo fozzyozzy,
nur kurz, nicht unhöflich
Bis demnächst
Matthias
Hallo Matthias. Mit den Breakpoints das verstehe ich nicht. Es muss doch eigentlich für jeden etwas definiert werden?! Das mit den Kommentaren liegt daran das es sich hierbei um eine Ligaverwaltung handelt die in ihren ihren Template die definierten Variablen als Kommentare ausgibt. Das funktioniert auch wunderbar.
Hallo
Mit den Breakpoints das verstehe ich nicht. Es muss doch eigentlich für jeden etwas definiert werden?!
Das tust du aber nicht. Breakpoints sind dazu da, zwischen verschiedenen Bereichen (z.B. der Anzeigebreite) zu unterscheiden und dafür unterschiedliche Regeln zu definieren. Du lässt mit dem in einem Vorposting gezeigten Code Anzeigebreiten unter 13.33em ohne Regeln da stehen. Warum nicht die für Breiten zwischen 13.33em und 15.625em als Grundlage für alle Breiten benutzen, die ab bestimmten größeren Mindestbreiten überschrieben werden? So, wie es Matthias Scharwies gleich in der ersten Antwort zeigte.
Die Kritik an den „vielen“ Breakpoints richtete sich an die sehr dicht beieinanderliegenden Breakpoints. Ist der Breitenunterschied zwischen 13.33em und 15.625em (mit von dir ausgerechneten 320px bzw. 375px) wirklich derartig auffällg, dass es dafür eines Breakpoints bedarf? Das sind gerade mal – von dir errechnete – 55px. Dass deine Zuordnung von em- und px-Werten mit anderen Schriften und/oder auf Geräten so nicht funktioniert, sei an der Stelle mal dahingestellt.
Das mit den Kommentaren liegt daran das es sich hierbei um eine Ligaverwaltung handelt die in ihren ihren Template die definierten Variablen als Kommentare ausgibt. Das funktioniert auch wunderbar.
Variablen als Kommentare? Die Kommentare in den Attributen funktionieren jedenfalls nicht.
Tschö, Auge
Hallo Auge.
Variablen als Kommentare? Die Kommentare in den Attributen funktionieren jedenfalls nicht.
Das funktioniert schon. Es wird in den Templates vom Liga-Manager-Online so ausgegeben
Mit den Breakpoints habe ich soweit verstanden. Hast du gut und verständlich erklärt. Danke dafür. Ich werde es nun gleich einmal so machen.
Hallo,
Variablen als Kommentare? Die Kommentare in den Attributen funktionieren jedenfalls nicht.
Das funktioniert schon. Es wird in den Templates vom Liga-Manager-Online so ausgegeben
aha, in den Templates! Also nicht im HTML-Code, den der Browser bekommt.
Der ist aber bei clientseitigen Problemen oder Darstellungsfragen relevant, nicht ein Template, in dem noch Platzhalter ersetzt werden.
Btw, heißt das, dass du auf das Markup keinen Einfluss hast? Ich frage mich zum Beispiel, warum die Tabelle keine Tabelle ist. Und ich habe den dumpfen Verdacht, dass hier die Template-Zeile mitsamt ihren IDs x-fach vervielfältigt wird - was dann zu mehreren gleichen IDs im Dokument führt: Fehler.
So long,
Martin
Hallo Martin.
Btw, heißt das, dass du auf das Markup keinen Einfluss hast? Ich frage mich zum Beispiel, warum die Tabelle keine Tabelle ist. Und ich habe den dumpfen Verdacht, dass hier die Template-Zeile mitsamt ihren IDs x-fach vervielfältigt wird - was dann zu mehreren gleichen IDs im Dokument führt: Fehler.
Nein. Das wird alles richtig dargestellt und es gibt da auch keine Fehler. Das Template selber habe ich mir angepasst so wie ich es brauche in meiner CSS.
Hallo,
Btw, heißt das, dass du auf das Markup keinen Einfluss hast? Ich frage mich zum Beispiel, warum die Tabelle keine Tabelle ist. Und ich habe den dumpfen Verdacht, dass hier die Template-Zeile mitsamt ihren IDs x-fach vervielfältigt wird - was dann zu mehreren gleichen IDs im Dokument führt: Fehler.
Nein. Das wird alles richtig dargestellt und es gibt da auch keine Fehler.
"richtig dargestellt" heißt noch lange nicht, dass es fehlerfrei ist. Wenn beispielsweise ein ID-Wert mehrmals im Dokument vergeben wird, dann ist das ein Fehler; die Browser verarbeiten das trotzdem klaglos. Das ist so, als wenn jemand "Klugscheiser" schreibt - es ist falsch, aber trotzdem weiß jeder, was gemeint ist.
Das Template selber habe ich mir angepasst so wie ich es brauche in meiner CSS.
Dann frage ich mich trotzdem, warum die wüste div-Konstruktion keine Tabelle ist, zumal du das in deinem Startposting sogar als Tabelle beschreibst.
So long,
Martin
Halle
Nein, es handelt sich um keine Tabellendaten, von daher wäre das table-Element falsch.
CSS-Table hat mit dem Inhalt nichts zu tun könnte verwendet werden.
Wenn überhaupt möglich und nicht vorgegeben würde ich den HTML-Quelltext aber auch verschlanken und die vorgesehenen HTML5-Elemente verwenden.
Gruss
MrMurphy
Hi,
Nein, es handelt sich um keine Tabellendaten, von daher wäre das table-Element falsch.
das hatten wir doch schon mehrmals. Würdest du bitte endlich mal erklären, was denn deiner Ansicht nach eine echte Tabelle ausmacht? Bisher bist du die Erklärung immer schuldig geblieben.
Ciao,
Martin
Hallo
Nein, es handelt sich um keine Tabellendaten, von daher wäre das table-Element falsch.
das hatten wir doch schon mehrmals. Würdest du bitte endlich mal erklären, was denn deiner Ansicht nach eine echte Tabelle ausmacht? Bisher bist du die Erklärung immer schuldig geblieben.
Vermutlich wirst du auch diesmal wieder keine Antwort erhalten. Manchmal habe ich das Gefühl, dass MrMurphy ein Troll ist. Er „drückt“ sich hier solange herum und gibt durchaus hilfreiche Antworten, bis irgendwer das Wort „Tabelle“ erwähnt. Dann erklärt er wieder und wieder, dass es Tabellen in der Realität nicht gäbe und erfreut sich daran, dass wir alle darauf anspringen.
Wenn eine Ligatabelle keine Tabelle ist, was dann?
Tschö, Auge
PS: Den Titel habe ich ausschließlich der Knalligkeit halber gewählt.
Hi,
das hatten wir doch schon mehrmals. Würdest du bitte endlich mal erklären, was denn deiner Ansicht nach eine echte Tabelle ausmacht? Bisher bist du die Erklärung immer schuldig geblieben.
Vermutlich wirst du auch diesmal wieder keine Antwort erhalten.
ich rechne auch nicht wirklich damit. Aber mit meiner Nachfrage will ich wenigstens zum Ausdruck bringen, dass er mit seiner Meinung ziemlich allein steht und man nicht allzuviel darauf geben sollte.
Manchmal habe ich das Gefühl, dass MrMurphy ein Troll ist. Er „drückt“ sich hier solange herum und gibt durchaus hilfreiche Antworten, bis irgendwer das Wort „Tabelle“ erwähnt. Dann erklärt er wieder und wieder, dass es Tabellen in der Realität nicht gäbe und erfreut sich daran, dass wir alle darauf anspringen.
Irgendwie so ähnlich muss es wohl sein.
PS: Den Titel habe ich ausschließlich der Knalligkeit halber gewählt.
Selbstverständlich.
So long,
Martin
Nein, es handelt sich um keine Tabellendaten, von daher wäre das table-Element falsch.
Bitte korrigiere mich und sage mir, warum meine Ansicht, dass es sich um eine Tabelle handelt, falsch ist.
Ich meine damit ausdrücklich nicht die gezeigte, auch in meinen Augen durchaus änderungswürdige Präsentation.
@@Der Martin
Ich frage mich zum Beispiel, warum die Tabelle keine Tabelle ist. Und ich habe den dumpfen Verdacht, dass hier die Template-Zeile mitsamt ihren IDs x-fach vervielfältigt wird - was dann zu mehreren gleichen IDs im Dokument führt: Fehler.
Nein. Das wird alles richtig dargestellt und es gibt da auch keine Fehler.
"richtig dargestellt" heißt noch lange nicht, dass es fehlerfrei ist. Wenn beispielsweise ein ID-Wert mehrmals im Dokument vergeben wird, dann ist das ein Fehler; die Browser verarbeiten das trotzdem klaglos.
Das ja. (Solange man nicht versucht, per JavaScript ein bestimmtes Element anhand seiner ID aus dem DOM zu fischen und dann das falsche an der Angel hat.)
Aber: Wenn eine Tabelle nicht als table ausgezeichnet ist, dann können Browser diese nicht richtig darstellen – nicht für alle Nutzer. Und das ist ein Fehler.
Dann frage ich mich trotzdem, warum die wüste div-Konstruktion keine Tabelle ist, zumal du das in deinem Startposting sogar als Tabelle beschreibst.
Und der Fehler sollte behoben werden.
LLAP 🖖
Hallo
Ich könnte noch durchdrehen
Eher bringst du uns zum durchdrehen.
Ohne Link zu deiner Seite können wird dir keine konkreten Verbesserungsvorschläge machen.
Du hast offensichtlich falsche Vorstellungen über die Verwendung von Media Queries.
Zum einen gibt es keine festen Media Queries. Solche Zahlen
(320, 375, 414, 480, 568, 600, 667, 736, 768, 800, 1024, 1280)
sind absoluter Unsinn, um es mal ohne Umschweife zu schreiben. Auch wenn einige dieser Zahlen seit Jahren ihren Unfug bei der Gestaltung von Webseiten treiben. Die solltest du ganz schnell vergessen, die haben nie Sinn gemacht.
Media Queries werden NICHT nach einem festen System verwendet, sondern dort, wo der Inhalt es erfordert. Das hat gleichzeitig den Vorteil dass der Quelltext übersichtlicher wird, weniger Quelltext erforderlich ist und du im Endeffekt weniger Arbeit hast.
Im Moment bin ich zudem unsicher, ob du die Schriftgröße überhaupt sinnvoll anwendest. An der muss für unterschiedliche Geräte / Fensterbreiten häufig gar nichts angepasst werden.
Häufig kommen Webseitenersteller auf den Dreh, für kleinere Geräte / schmalere Fenster kleinere Schriftgrößen zu verwenden um ihr Layout nicht zu zerstören. Sowas ist absoluter Unsinn. Grade mobile Geräte werden häufig auch unterwegs genutzt (Bahn, Auto, Wartezimmer) wo keine stabile, ruhige Unterlage gegeben ist. Deshalb sollte die Schrift für kleine Bildschirme eher größer werden, damit der Text auch gut lesbar bleibt, wenn sich das Gerät in der "freien Hand" befindet.
Gruss
MrMurphy
Häufig kommen Webseitenersteller auf den Dreh, für kleinere Geräte / schmalere Fenster kleinere Schriftgrößen zu verwenden um ihr Layout nicht zu zerstören. Sowas ist absoluter Unsinn.
Weia.
Ich mach den Seitentitel auch gern mal kleiner.
.
..
...
(und vermeide hoffentlich so harte Äußerungen wie "Sowas ist absoluter Unsinn.")
Hallo
Ich habe mal ein Beispiel erstellt, angelehnt an deine Quellcodeschnipsel.
Zu dem HTML
<div id="table_leaque">
<div id="liga_tabelle">
<div id="platzierung">
<p>#platzierung</p>
</div>
<div id="teambild">
<p>#teambild</p>
</div>
<div id="teamname">
<p class="typoklein"><acronym>.typoklein</acronym></p>
</div>
<div id="tordifferenz">
<p>#tordifferenz</p>
</div>
<div id="punkte">
<p>#punkte</p>
</div>
</div>
</div>
kann das CSS verwendet werden:
@media all {
.typoklein {
font-size: 1.5em;
background-color: cyan;
text-align: left;
position: relative;
top: 50%;
/*-webkit-transform: translateY(-50%);*/
/*-ms-transform: translateY(-50%);*/
/*transform: translateY(-50%);*/
}
}
@media all and (min-width: 400px) {
.typoklein {
font-size: 1.4em;
background-color: blue;
}
}
@media all and (min-width: 800px) {
.typoklein {
font-size: 1.2em;
background-color: green;
}
}
@media all and (min-width: 1100px) {
.typoklein {
font-size: 1.1em;
background-color: orange;
}
}
Wobei ich eher HTML5 und damit teilweise auch die neueren Elemente verwenden würde.
Wenn das bei dir nicht funktioniert enthälst du uns CSS-Angaben vor. Die können wir natürlich nur berücksichtigen wenn wir sie kennen.
Gruss
MrMurphy
Oh weh da hab ich hier aber was losgetreten. Auf die Frage warum ich denn keine Tabellendaten anstatt von DIV#CONTAINER definiere kann ich nur sagen, dass mir einmal gesagt bzw. erklärt wurde das es wegen der Barrierefreiheit besser ist keine Tabellendaten zu definieren sondern ehr DIV's# oder Listenelemente. Ich werde mich jetzt mal drüber machen und mal und etwas neues zusammenstellen was ich dann hier posten werde.
LG
Hallo fozzyozzy,
Auf die Frage warum ich denn keine Tabellendaten anstatt von DIV#CONTAINER definiere kann ich nur sagen, dass mir einmal gesagt bzw. erklärt wurde das es wegen der Barrierefreiheit besser ist keine Tabellendaten zu definieren sondern ehr DIV's# oder Listenelemente.
Das Gegenteil ist der Fall.
Wenn es sich um tabellarische Daten handelt, ist die Tabelle das einzig richtige Element. Eben aus Gründen der Barrierefreiheit.
Bis demnächst
Matthias
Okay dann hab ich das jetzt so mal ganz schnell oben in meinem (unerfahrenen) Köpfchen abgespeichert.
@@fozzyozzy
Okay dann hab ich das jetzt so mal ganz schnell oben in meinem (unerfahrenen) Köpfchen abgespeichert.
Cheatah hatte das mal auf den Punkt gebracht:
„Die einzig relevante Frage ist: Handelt es sich um _tabellarische_ Daten? Wenn nein, ist eine Tabelle der falsche Weg. Wenn ja, ist alles andere als eine Tabelle falsch.“ (Zitat 121)
LLAP 🖖
Hallo,
Oh weh da hab ich hier aber was losgetreten.
ach was, völlig normal hier.
Auf die Frage warum ich denn keine Tabellendaten anstatt von DIV#CONTAINER definiere kann ich nur sagen, dass mir einmal gesagt bzw. erklärt wurde das es wegen der Barrierefreiheit besser ist keine Tabellendaten zu definieren sondern ehr DIV's# oder Listenelemente.
Vermutlich hast du da etwas missverstanden. Oder derjenige, von dem du das hast, war sich auch nicht so sicher.
Gemeint war vermutlich, dass man Tabellen nicht einfach als Gestaltungsmittel benutzen, oder besser missbrauchen sollte. Vor zehn, fünfzehn Jahren war das noch gängige Praxis, um x-beliebige Teile des Inhalts in einem Raster anzuordnen.
Heute ist die Maxime eigentlich: Verwende diejenigen HTML-Elemente, die die Struktur und Bedeutung des Inhalts am besten wiedergeben. Und zwar ohne Rücksicht darauf, wie das mit der browsereigenen Default-Formatierung aussieht.
Und wenn die Daten, die du darstellen willst, den Charakter einer Tabelle haben, dann nimmst du am besten auch eine Tabelle. Charakteristisch für eine Tabelle ist, dass man jeder Zeile und jeder Spalte eine Art Überschrift geben könnte (aber nicht muss), die die Art des Inhalts beschreibt. In deiner Ligatabelle hast du beispielsweise die Zeilen für die jeweilige Plazierung des Teams, und die Spalten etwa für Name, Punkte, Tore und so.
Und dann, wenn das ungestylte Markup soweit steht, baut man das Stylesheet dazu, das allen Elementen das gewünschte Aussehen und Layout verpasst.
Ich werde mich jetzt mal drüber machen und mal und etwas neues zusammenstellen was ich dann hier posten werde.
Nur zu. Ich bin gespannt.
So long,
Martin
Hallo
Und dann, wenn das ungestylte Markup soweit steht, baut man das Stylesheet dazu, das allen Elementen das gewünschte Aussehen und Layout verpasst.
@fozzyozzy
Um Martins Aussage zu ergänzen: Auf schmalen Ansichten (z.B. auf Smartphones) kann das Ergebnis der Gestaltung auch sein, dass die Tabellenzellen einer Zeile auch untereinander dargestellt werden, weil für alle Zellen nebeneinander einfach nicht genug Platz ist.
Mit etwas CSS-Magie wird aus:
|Platz|Verein|Spieltage|Tore|Punkte |---| |1|Holzbein Kiel|5|12:3|13 |2|GSG Sinnlos|5|10:3|10 |...
dieses:
|Platz: 1 |Verein: Holzbein Kiel |Spieltage: 5 |Tore: 12:3 |Punkte: 13 | | |Platz: 2 |Verein: GSG Sinnlos |Spieltage: 5 |Tore: 10:3 |Punkte: 10 | |...
Natürlich mit einer Formatierung, die die Datenzeilen besser voneinander unterscheidbar macht.
Das ist in der Tat ein nicht unerheblicher Lernaufwand. Es lohnt meiner Meinung nach aber, sich das anzutun. Auch und gerade dann, wenn man selbst ein öffentlich zugängliches Webangebot betreibt und administriert oder mit der Erstellung solcher Angebote für andere sein Lebensunterhalt bestreiten will.
Jedenfalls ist die Tatsache, dass eine Tabelle standardmäßig eine ganz bestimmte Darstellung in den Browsern hat, kein Grund, sie bei Bedarf nicht auch anders darzustellen.
Tschö, Auge
Hallo Auge,
Um Martins Aussage zu ergänzen: Auf schmalen Ansichten (z.B. auf Smartphones) kann das Ergebnis der Gestaltung auch sein, dass die Tabellenzellen einer Zeile auch untereinander dargestellt werden, weil für alle Zellen nebeneinander einfach nicht genug Platz ist.
Mit etwas CSS-Magie
Ja, die responsiven Tabellen hatte ich @fozzyozzy auch schon verlinkt.
Bis demnächst
Matthias
Also diese Idee finde ich etwas merkwürdig. Einerseits ist es ja nett, dass die Tabelle sich auf diese Weise automatisch zu einer Art Liste umgestaltet. Andererseits hat man nun die Tabellenüberschriften in zwei Fassungen und an zwei Stellen - einmal im HTML Markup (th Zellen) und einmal im CSS, in den ::before Styles. Da rebelliert eigentlich mein DRY Instinkt.
Rolf
Hallo Rolf b,
Andererseits hat man nun die Tabellenüberschriften in zwei Fassungen und an zwei Stellen - einmal im HTML Markup (th Zellen) und einmal im CSS, in den ::before Styles. Da rebelliert eigentlich mein DRY Instinkt.
Ja. Darauf wird im Artikel auch eingegangen.
Bis demnächst
Matthias
@@MrMurphy1
Ich habe mal ein Beispiel erstellt, angelehnt an deine Quellcodeschnipsel.
Schlechtes Beispiel.
@media all and (min-width: 400px) {
„Dass media queries in nicht in px, sondern in em angegeben werden sollten, ist auch nichts Neues.“
Auch für dich nicht.
Wobei ich eher HTML5 und damit teilweise auch die neueren Elemente verwenden würde.
table gibt es seit HTML 3.2.
LLAP 🖖
Guten Morgen liebe Freunde. Also ich habe gestern Abend einmal die Zeit genutzt und alles so probiert wie ihr hier es beschrieben habt. Es funktioniert alles wunderbar. Ich habe nun auch nur drei Breakpoints angelegt und mich mit dem Thema mobile-first begonnen auseinanderzusetzen. Ein Frage hätte ich da aber noch. Kann ich denn die Media-Queries getrennt von den anderen CSS Angaben in eine separate CSS-Datei auslagern un dann per @import "queries.css"; einfügen? Oder kann es da zu Problemen führen? Mir geht es nur darum, mich im CSS-Dschungel besser zurechtzufinden.
LG
Hallo
Das kannst du machen. Dabei gerätst du aber ganz schnell in Teufels Küche. Die ist so nebelig dass du dich verläufst.
Technisch funktioniert das vollkommen problemlos, sorgt aber grade nicht für Übersichtlichkeit.
Zudem deutet es darauf hin, dass du die Media Queries nicht praxisgerecht verwendest. Bei einem guten Layout gibt es unterschiedliche, vom Inhalt abhängige Breakpoints. Wenn du dir zwei, drei oder vier für die gesamte Seite raussuchst und dich auf die beschränkst, verwendest du die in der Regel nicht optimal. Das hängt aber von deiner Seite ab, die niemand hier kennt.
Gruss
MrMurphy
@@MrMurphy1
Zudem deutet es darauf hin, dass du die Media Queries nicht praxisgerecht verwendest. Bei einem guten Layout gibt es unterschiedliche, vom Inhalt abhängige Breakpoints. Wenn du dir zwei, drei oder vier für die gesamte Seite raussuchst und dich auf die beschränkst, verwendest du die in der Regel nicht optimal.
Nein, das kann man so nicht sagen.
Ja, Breakpoints sollten sich nach dem Inhalt richten, nicht nach irgendwelchen Geräten, die gerade(!) in sind.
Wenn man aber beim Gestalten bei Komponente A auf einen Breakpoint bei 16em kommt und bei Komponente B auf einen Breakpoint bei 17em, dann wäre es töricht, das so umzusetzen.
Die Komponenten sind im Zusammenhang zu sehen. Womöglich fügen sie sich unter 16em harmonisch zusammen und auch über 17em, aber zwischen 16em und 17em passen sie überhaupt nicht zueinander und die Seite als Ganzes sieht einfach nur Scheiße aus.
Webseiten wollen getestet werden – visuell oder auch automatisch. Die QA (quality assurance – schon mal von gehört?) wird sich „bedanken“, wenn es alle 0.5em einen Breakpoint für irgendeine Komponente auf irgendeiner Seite der Plattform gibt. Nicht machen!
Für das obige Beispiel heißt das, für die Komponenten A und B einen gemeinsamen Breakpoint zu setzen: 16em oder 17em oder vielleicht auch 16.5em.
TL;DR: vom Inhalt abhängige Breakpoints, aber sich dennoch auf wenige beschränken.
LLAP 🖖
Hallo
Es funktioniert alles wunderbar. Ich habe nun auch nur drei Breakpoints angelegt und mich mit dem Thema mobile-first begonnen auseinanderzusetzen.
Schön. :-)
Ein Frage hätte ich da aber noch. Kann ich denn die Media-Queries getrennt von den anderen CSS Angaben in eine separate CSS-Datei auslagern un dann per @import "queries.css"; einfügen? Oder kann es da zu Problemen führen? Mir geht es nur darum, mich im CSS-Dschungel besser zurechtzufinden.
Ja, du kannst das auslagern und auf die beschriebene Art einbinden. Aber jetzt kommt das „Aber“.
Aber jede einzeln abgefragte Ressource, also das oder die HTML-Dokumente, Bilder, JS- und eben auch CSS-Dateien brauchen zusätzlich zur Übertragung der Daten an sich Zeit für die Aushandlung der Verbindung und die HTTP-Header. Zudem sind so nicht alle CSS-Regeln am Stück da, was dazu führen kann, dass erst ungeeignete oder gar keine Regeln angewandt werden und die Seite nach 1 bis 2 Sekunden umgebaut wird, weil erst dann die Datei mit den passenden Regeln eintrifft. Das will man nicht. Nicht als Nutzer und auch nicht als Betreiber, der das auf's Butterbrot geschmiert bekommt.
Tschö, Auge
Okay das leuchtet ein. Danke! LG