nicht angemeldet
Frage zum Wiki-Artikel „container-type“
Rolf B
Matthias Scharwies
Auge
Gunnar Bittersmann
Der Martin„anwendbar auf: alle Elemente“?
<body style="container-type: inline-size;">
<p>Und schon meckert der Inspektor:<br/>
<q>nicht unterstützter Eigentschafts-Name</q></p>
</body>
Egro: body ist kein HTML-Element!
-
Hallo nix,
kann ich nicht nachvollziehen. Welchen Browser verwendest Du? Im FF ist container-type noch SEHR neu.
Wobei die Frage, ob container-type für den body sinnvoll ist, natürlich gestellt werden darf. Aber rein formal meckert mein Chrömchen hier nicht.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo nix,
Der soll sich in NIX-GSCHEITES umbenennen.
kann ich nicht nachvollziehen. Welchen Browser verwendest Du? Im FF ist container-type noch SEHR neu.
In FF115 wird alles probemlos erkannt.
Ja, uns fehlt ein Tutorial zu container queries, in dem wir alles mal testen und ausführlich beschreiben.
Nix krisitisiert aber immer wieder unsere aus der Spec übersetzten Texte und versucht uns die mangelnde Browserunterstützung und manche Unklarheiten vorzuwerfen.
Wir sollten nicht über jedes Stöckchen springen, dass man uns hinhält.
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt! -
Gemeckert hat Safari. Und: ja, so einfach ist die Situation dann doch nicht gewesen, als daß das Gemecker beim rigoros zusammengestrichenen Demonstrations-Versuch auch auftreten würde. Daß die Meldung vom im body eingeschlossenen Kram (bzw. dem da werkelnden CSS) liegt – man lebt in interessanten Zeiten.
Woran es liegt? Man befrage den Browser. Mehr als „so nicht“ verrät er ja eher selten.
-
Servus!
Gemeckert hat Safari.
Laut caniuse hat
container-typeeine globale Unterstützung von derzeit 87.7%.SELFHTML steht vor einem Problem: Soll es neue Technologien erst beschreiben, wenn es in allen Browsern funktioniert oder schon neue Seiten in der Referenz anlegen?
Im SVG-Bereich löschen wir derzeit Features, die 2015 in der Spec vorgeschlagen worden waren und deren Implementierung kurz bevor stand. Da die Browserhersteller diese dann aber doch ignorierten, wurden sie mittlerweile aus der Spec entfernt. Da wir nur ein kleines Team mit begrenzter Arbeitskraft sind, bereinigen wir das jetzt erst.
Im Bereich container queries fehlt mir aktuell die Zeit die vorhandenen Beispiele nachzubauen, zu testen und dann ein Grundlagentutorial zu schreiben. Bis jetzt hat sich auch kein Freiwilliger gefunden.
Das 2018 entstandene Grid-Tutorial haben wir mittlerweile mehrfach umgeschrieben, da einige Features immer wieder umbenannt wurden. (vendor-prefixes, MS-eigene properties, etc). So wird es auch bei den Containern sein.
Ich kann nur jeden einladen, zu testen was geht und der Community funktionierende Beispiele zur Verfügung zu stellen. Das kann über eine Anmeldung im Wiki im Benutzernamensraum oder über einen längeren Post im Forum erfolgen.
Nicht erwünscht sind HTML-Kommentare in Wikiseiten, die wir wieder entfernen müssen und eine generelle Kritik an Browserherstellern. Da wäre es besser eine Issue am dafür geeigneten Ort zu erstellen.
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
Funktionierende Beispiele sind natürlich was Schönes. Zum Zeigen. Das, was dann aber Ärger bereitet, wenn man „nur an einem kleinen Schräubchen dreht“, und das Beispiel damit zum Explodieren bringt. Und das sind nicht selten „Kleinigkeiten“, wie sie auch dafür sorgen, daß so manches Stylesheet fortwährend wächst, unbenutzte Dinge enthält und vieles drin unnötig ist, weil „weiter unten“ alles nochmal, gleich oder anders, definiert und deklariert wird.
Fehlt wohl nur eine Melodie. Zu „ja, so ein CSS-Compiler, der wäre schon praktisch, so ein CSS-Compiler, der wäre schön …“ 😟
-
-
Hallo
Gemeckert hat Safari.
Welche Version?
Tschö, Auge
--
„Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde-
Aktuell. Wobei mittlerweile klar ist, daß es da Probleme mit der internen Struktur gibt. Hier einfach, weiter unten, „Nein, nicht FF. Safari ist dran.“ suchen.
-
Hallo
Aktuell. Wobei mittlerweile klar ist, daß es da Probleme mit der internen Struktur gibt. Hier einfach, weiter unten, „Nein, nicht FF. Safari ist dran.“ suchen.
Ich fragte nur, weil der Safari laut CanIUse? das in beiden Versionen (Desktop und Mobil) erst seit der Version 16 beherrscht. Und zumindest der Mobilbrowser ist ja noch recht verbreitet.
Tschö, Auge
--
„Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde
-
-
-
-
Eigentlich ging es mir da ja nur um „anwendbar auf: alle Elemente“ in der Beschreibung. Daß die Browser, also wenigstens Safari, noch weitere Überraschungen, Befindlichkeiten, bereit halten, ist ja schon eine Fortsetzungsgeschichte …
-
-
Guten Morgen,
nachdem es immer wieder Fragen zu den Kurzübersichten in der Referenz bezüglich der neuen Containerabfragen gab, hier nun ein Tutorial mit vorerst 3 Beispielen:
CSS/Media_Queries/Container_Queries
- Der Seitentitel mag ein wenig komisch klingen - inhaltlich passt es eben zu den Medienabfragen.
- Die Grafiken zeigen, woum es geht: Es wird nicht mehr der Viewport abgefragt und dann für jedes Element je nach Position in der Seite eine eigene Deklaration womögich gar mit festen magic numbers festgelegt. Eine Festlegung für alle Gelegenheiten!
Karten
Das erste Beispiel scheint logisch: Mit resize können wir den Container umschalten und die Ansicht für die card ändert sich.
Kompizierter wird es weiter unten. Hier muss ich, wie auf dem Stammtisch schon erwähnt, wrapper-Elemente einziehen uund die klare Struktur, die ich mir in den letzten Jahren mit Grid angewöhnt habe, aufgeben.
Fazit: Das würde ich so nicht verwenden!
Hat jemand andere Beispiele / Vorschläge?
Fluide Typografie
Da hatte mich @nix mit seiner Frage nach der Berechnung der neuen cqi-Einheit angestupst.
- Innerhalb eines Containers entspricht
1cqi1% der Container-Abmessung in Inline-Richtung (bei horizontaler Schrift: cqw; bei vertikaler Schrift: cqh) - Wenn sie sich nicht innerhalb eines Containers befinden, verwenden sie Werte der Viewport-Abmessungen, aso hier
1vioder1vw.
Wofür braucht man das?
In diesem Beispiel wächst die Schriftgröße mit, so dass die Überschrift immer den verfügbaren Raum einimmt. Das finde ich cool!
Bitte kommentiert oder - noch besser - zeigt eigene Entwürfe, die wir in das Tutorial einbauen können.
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
Hallo Matthias,
Bin in der Bahn und kann gerade nicht den Inhalt würdigen.
Nur eins: Die Überschrift funktioniert nur mit dem Font, für den du den (magischen) Skalierungsfaktor bestimmt hast. Sieht cool aus, wenn es passt, sonst nicht.
Bei mir geht's schon im Frickl schief
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias Scharwies,
Die Überschrift funktioniert nur mit dem Font, für den du den (magischen) Skalierungsfaktor bestimmt hast. Sieht cool aus, wenn es passt, sonst nicht.
Bei mir geht's schon im Frickl schief
Danke, teste ich nochmal!
Dass ist das nächste Problem: Fonts und Typografie / wie kriege ich woff2-Dateien ins Wiki, bzw. auf src.selfhtml.org.
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
Servus!
Servus!
Hallo Matthias Scharwies,
Die Überschrift funktioniert nur mit dem Font, für den du den (magischen) Skalierungsfaktor bestimmt hast. Sieht cool aus, wenn es passt, sonst nicht.
Bei mir geht's schon im Frickl schief
Danke, teste ich nochmal!
Grad getestet - auf allem meinen 2 Win11-Rechnern mit FF, OP und Chr und dem iPhone. Dort läuft's!
Auf dem iPad meiner Frau nicht, da sie den hauptsächlich für Kindle nutzt, weiß ich aber nicht, wie alt der Safari ist.
Ich hatte ja keine Festlegung einer Schrift notiert. Hast Du da was besonderes?
Soll ich etwas ganz genaues festlegen?
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
-
-
-
Paßt zwar nur „bedingt“ dazu. Aber ich habe etwas entdeckt, das vmtl. für manches meiner Probleme in der Ecke zumindest mit verantwortlich ist. Es ist zwar recht vage, ich suche nach einer Idee, mit der ich alles „zusammenkleben“ kann — aber es ist, wenigstens für mich, mit einem eindeutigen „Aha-Effekt“ verbunden.
Also: ich hatte versucht, meine Vorstellungen mit „minimalistischem Element-Verbrauch“ umzusetzen. So wenige Klassen zu verbauen, wie möglich, die Separation der Inhalte (weitgehend) alleine mit
<header>,<article>, … und nicht zuletzt mit benutzerdefinierten Elementen (ohne JS dahinter) wie z.B.<info-card>anstelle von (oft tief verschachtelten) div-Wüsten.Das hat, abgesehen von den ja schon „erwähnten“ Eigentümlichkeiten der CSS-Mathematik mit Firefox und Safari bis auf kleinere Unterschiede und „auf den ersten Blick“ funktioniert. Aber dann kamen diese „Details“ (≠
details). Beim Versuch, da z.B. diese „cqb“ (aber auch „anderen modernen Kram“) einzusetzen, ist mir dann immer wieder alles um die Ohren geflogen. Ein paarmal schon so, daß ich das Stylesheet komplett neu angefangen habe.Und gestern habe ich dann im Inspektor von Safari etwas gesehen, das seltsam aussah: unter „Layer“ tauchte nicht unbedingt das auf, was ich erwartet hatte. Ein paar, aber nicht alle, dieser „neumodischen Strukturierungs-Tags“ schienen sich unsichtbar gemacht zu haben, stattdessen gab es da deren Inhalt, meist ein paar
<p>zu sehen. Nach ein paar Überlegungen habe ich jetzt einfach mal eine Kopie des Projekts angefertigt und da drin dem Texteditor überlassen, aus z. B.<article> … </article>ein<div class="article"> … </div>(usw. usf.) zu machen. Und im CSS dazu dann natürlich auchdiv.articleanstelle vonarticle. Das überraschende (vorläufige) Ergebnis: diese neue Version ist gleich „explodiert“, sieht erheblich anders aus. Was hier der schnell erkannte, aber doch auch unverstandene, Grund ist:body { … grid: "b-head b-head b-head" minmax(10cqb, 1fr) "b-text b-pics b-infos" minmax(78cqb, 12fr) "b-text b-comment b-infos" minmax(10cqb, 1fr) / var(--div.article-width) minmax(100ch, 1fr) var(--info-width); … }funktioniert in der „Sparversion“. Sprich: Safari mecktert daran nichts an. Und in der „ausführlichen“ meint er plötzlich, da stecken ungültige EIgenschaftswerte drin!
Ja, ich bin verwirrt. Denn: wenn cqb da nicht erlaubt ist: wieso dann „jetzt“. Und: woher kam „des Browsers Segen“ denn davor? Immerhin haben die da ja bewirkt, was ich ihnen angedacht hatte … 🤯
-
Guten Morgen!
Also: ich hatte versucht, meine Vorstellungen mit „minimalistischem Element-Verbrauch“ umzusetzen. So wenige Klassen zu verbauen, wie möglich, die Separation der Inhalte (weitgehend) alleine mit
<header>,<article>, … und nicht zuletzt mit benutzerdefinierten Elementen (ohne JS dahinter) wie z.B.<info-card>anstelle von (oft tief verschachtelten) div-Wüsten.Genau richtig!
Das hat, abgesehen von den ja schon „erwähnten“ Eigentümlichkeiten der CSS-Mathematik mit Firefox und Safari bis auf kleinere Unterschiede und „auf den ersten Blick“ funktioniert.
Gut!
Aber dann kamen diese „Details“ (≠
details). Beim Versuch, da z.B. diese „cqb“ (aber auch „anderen modernen Kram“) einzusetzen, ist mir dann immer wieder alles um die Ohren geflogen.Dann nimm doch em und probier erst mal damit.
Ein paarmal schon so, daß ich das Stylesheet komplett neu angefangen habe.
Richtig! Entweder sauber neu anfangen oder verdächtige Sachen auskommentieren. Wenn's klappt, wieder weitermachen.
Und gestern habe ich dann im Inspektor von Safari etwas gesehen, das seltsam aussah: unter „Layer“ tauchte nicht unbedingt das auf, was ich erwartet hatte. Ein paar, aber nicht alle, dieser „neumodischen Strukturierungs-Tags“ schienen sich unsichtbar gemacht zu haben, stattdessen gab es da deren Inhalt, meist ein paar
<p>zu sehen.Wir brauchen da ein Live-Beispiel, welches du auch anonym auf bplaced oder codepen stellen kannst. So ist das alles ein Ratespiel.
Was sagt denn der Seiteninspektor in Firefox dazu?
Nach ein paar Überlegungen habe ich jetzt einfach mal eine Kopie des Projekts angefertigt und da drin dem Texteditor überlassen, aus z. B.
<article> … </article>ein<div class="article"> … </div>(usw. usf.) zu machen.Aber vorher hattest du doch gesagt, dass das HTML-Gerüst funktioniert hätte?
Die "neuen" Elemente wie article können nicht Schuld sein!
Und im CSS dazu dann natürlich auch
div.articleanstelle vonarticle.div.article { color: red; }geht, aber ...
Das überraschende (vorläufige) Ergebnis: diese neue Version ist gleich „explodiert“, sieht erheblich anders aus. Was hier der schnell erkannte, aber doch auch unverstandene, Grund ist:
body { … grid: "b-head b-head b-head" minmax(10cqb, 1fr) "b-text b-pics b-infos" minmax(78cqb, 12fr) "b-text b-comment b-infos" minmax(10cqb, 1fr) / var(--div.article-width) minmax(100ch, 1fr) var(--info-width); … }funktioniert in der „Sparversion“. Sprich: Safari mecktert daran nichts an. Und in der „ausführlichen“ meint er plötzlich, da stecken ungültige EIgenschaftswerte drin!
Funktioniert
--div.article-width?Ich teste das in einem Minimal-Beispiel:
h1 { --red.color: red; color: var(--red.color); }Das geht bei mir (Win11, FF115) nicht. Ich hätte so etwas nie verwendet, da ich immer mit Unter- oder Bindestrich trenne.
Ja, ich bin verwirrt. Denn: wenn cqb da nicht erlaubt ist: wieso dann „jetzt“. Und: woher kam „des Browsers Segen“ denn davor? Immerhin haben die da ja bewirkt, was ich ihnen angedacht hatte … 🤯
Ganz persönlich:
cqbund die vielenminmax()ist mir zuviel Finetuning - ich würde immer nur eine Spalte / Zeile mitminmax()setzen und bei den anderen nur mitfrarbeiten. Ditoemanstelle von cqb und dann mal schauen.In einem zweiten Schritt dann evtl. andere Einheiten, aber warum
cq*ohne container???Aber genaues kann man nur bei einem Live-Beispiel sagen, wenn wir die Fehler selbst sehen!
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!-
Hallo Matthias Scharwies,
der Name eines custom property muss ein gültiger CSS-Name sein und mit -- anfangen (eine dashed ident).
https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Namen_und_Zeichenketten#Namen
--div.article-width geht nicht, das ist ein ungültiger Name, damit wird die komplette grid-Definition ungültig und 💥. Meine ich.
Rolf
--
sumpsi - posui - obstruxi-
Servus!
Hallo Matthias Scharwies,
der Name eines custom property muss ein gültiger CSS-Name sein und mit -- anfangen (eine dashed ident).
https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Namen_und_Zeichenketten#Namen
--div.article-width geht nicht, das ist ein ungültiger Name, damit wird die komplette grid-Definition ungültig und 💥. Meine ich.
Ebent. Da wollte ich @nix sanft hinführen. In den Container-Beispielen hatte ich Klassen innerhalb der card mit
.card__title.card__contentnotiert. Aber das mit dem Punkt ist so falsch, dass ich nie drauf gekommen wäre. (Andererseits steht's eben auch nicht in CSS/Wertetypen/Namen_und_Zeichenketten#Namen)Herzliche Grüße
Matthias Scharwies
PS: Mich wundert, dass es immer wieder Programmierer / WebDesigner gibt, die ein zerschossenes Layout haben und dann denken, dass es am article-Element liegt. Wie könnte man da eine strukturierte Vorgehensweise propagieren?
-
Hallo Matthias,
naja, im Wiki-Artikel steht, was erlaubt ist, und dann "alle anderen Zeichen müssen maskiert werden". Vielleicht muss man den Maskierungshinweis vorziehen. "Die folgenden Zeichen sind erlaubt, alle anderen brauchen ein
\". Demnach wäre--div\.article-widthein gültiger Name 🤢.Ich will Nix nicht als Narr bezeichnen, aber trotzdem kommt mir da der Spruch in den Sinn: Nichts ist narrensicher, Narren sind viel zu kreativ. Oder anders: Wenn Du etwas narrensicher gemacht hast, werden sich nur noch Narren damit befassen wollen. Gilt auch für Wiki-Artikel. Schreibt man für jeden potenziellen Fehler rein, dass man ihn nicht machen darf, verdreht jeder die Augen und geht woandershin.
Strukturiertes Vorgehen hast Du beschrieben: Mit den einfachen Dingen anfangen, nach und nach komplexere Dinge einbauen. Wenn's hochgeht, zurüćk[1] zu dem, was funktionierte, und ggf. weniger auf einmal einbauen. Die Dinge, die das funktionierende Layout explodieren ließen, irgendwo anders separat austesten.
Und dann hat nix es genau richtig gemacht: jemanden fragen. Was wirklich hilfreich wäre, ist das Vorführen des Fehlers in einem Live-Beispiel. Denn auch wir brauchen schon mal den Inspektor, um Dinge zu sehen. Und beim minimalistischen Reproduzieren eines Fehlers kommt man gelegentlich auch schon mal drauf, was falsch war.
Und dann kann es natürlich auch sein, dass der Safari Dinge akzeptiert, die andere nicht akzeptieren - keine Ahnung, ich hab bei mir im Büro keine angebissenen Äpfel rumliegen.
Dass bestimmte Dinge aber mit div funktionieren, die mit article nicht gehen, das würde ich ausschließen. Ein article ist ein div mit spezieller Semantik, aber nicht mit speziellem UI-Verhalten. Bei Elementen, deren UI speziell ist (input, button, details, fieldset, dialog, etc etc), sieht die Sache schon anders aus. Aber nicht bei den semantischen Strukturelementen main, section, article, header, footer, nav und aside.
cq* Einheiten außerhalb einer @container Regel sollte man wirklich vermeiden. Find ich. Oder die Nummer konsequent durchziehen und dem HTML-Element die container-type Eigenschaft zuweisen 🤪.
Rolf
--
sumpsi - posui - obstruxi
Ich weiß nicht, was meine Tastatur sich dabei gedacht hat, aber da war plötzlich ein c mit einem ´ Akzent. Wer braucht denn sowas!?!?!? ↩︎
-
@@Rolf B
Ich weiß nicht, was meine Tastatur sich dabei gedacht hat, aber da war plötzlich ein c mit einem ´ Akzent. Wer braucht denn sowas!?!?!?
Cześć!
Ich brauche sowas.
🖖 Живіть довго і процвітайте
--
Ad astra per aspera-
@@Gunnar Bittersmann
Ich weiß nicht, was meine Tastatur sich dabei gedacht hat, aber da war plötzlich ein c mit einem ´ Akzent. Wer braucht denn sowas!?!?!?
Cześć!
Ich brauche sowas.
Und man braucht sowas auch, um Namen von Städten und Gemeinden in der Lausitz zweisprachig wiedergeben zu können, bspw. Forst/Baršć.
Danach ist wohl kein ICE benannt, aber es gibt einen mit ś: Cottbus/Chóśebuz. Und einen mit š: Bautzen/Budyšin.
🖖 Живіть довго і процвітайте
--
Ad astra per aspera
-
-
Servus!
Hallo Matthias,
naja, im Wiki-Artikel steht, was erlaubt ist, und dann "alle anderen Zeichen müssen maskiert werden". Vielleicht muss man den Maskierungshinweis vorziehen. "Die folgenden Zeichen sind erlaubt, alle anderen brauchen ein
\". Demnach wäre--div\.article-widthein gültiger Name 🤢.Oh, je!
Ich will Nix nicht als Narr bezeichnen, aber trotzdem kommt mir da der Spruch in den Sinn: Nichts ist narrensicher, Narren sind viel zu kreativ. Oder anders: Wenn Du etwas narrensicher gemacht hast, werden sich nur noch Narren damit befassen wollen. Gilt auch für Wiki-Artikel. Schreibt man für jeden potenziellen Fehler rein, dass man ihn nicht machen darf, verdreht jeder die Augen und geht woandershin.
Nein, das reicht so wie's ist.. Normalerweise (TM) verwendet man eben keine Emojis (nix am 28.07.2023) , Steuerzeichen und Punkte in Namen. Basta!
Nix hatte irgendwann mal (am 03.08.) Simonyi erwähnt - das technische Denken fiel ihm heute auf die Füße!
Strukturiertes Vorgehen hast Du beschrieben: Mit den einfachen Dingen anfangen, nach und nach komplexere Dinge einbauen. Wenn's hochgeht, zurüćk[1] zu dem, was funktionierte, und ggf. weniger auf einmal einbauen. Die Dinge, die das funktionierende Layout explodieren ließen, irgendwo anders separat austesten.
Und dann hat nix es genau richtig gemacht: jemanden fragen. Was wirklich hilfreich wäre, ist das Vorführen des Fehlers in einem Live-Beispiel. Denn auch wir brauchen schon mal den Inspektor, um Dinge zu sehen. Und beim minimalistischen Reproduzieren eines Fehlers kommt man gelegentlich auch schon mal drauf, was falsch war.
Genau!
Und dann kann es natürlich auch sein, dass der Safari Dinge akzeptiert, die andere nicht akzeptieren - keine Ahnung, ich hab bei mir im Büro keine angebissenen Äpfel rumliegen.
Dass bestimmte Dinge aber mit div funktionieren, die mit article nicht gehen, das würde ich ausschließen. Ein article ist ein div mit spezieller Semantik, aber nicht mit speziellem UI-Verhalten. Bei Elementen, deren UI speziell ist (input, button, details, fieldset, dialog, etc etc), sieht die Sache schon anders aus. Aber nicht bei den semantischen Strukturelementen main, section, article, header, footer, nav und aside.
Genau!
cq* Einheiten außerhalb einer @container Regel sollte man wirklich vermeiden. Find ich. Oder die Nummer konsequent durchziehen und dem HTML-Element die container-type Eigenschaft zuweisen 🤪.
Hey, wir sind 100% d'accord!
Herzliche Grüße
Matthias Scharwies
--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
Ich weiß nicht, was meine Tastatur sich dabei gedacht hat, aber da war plötzlich ein c mit einem ´ Akzent. Wer braucht denn sowas!?!?!? ↩︎
-
Hallo Matthias,
Normalerweise (TM) verwendet man eben keine Emojis
Die sind das kleinste Problem, alles über U+127 braucht kein Escaping im CSS. Emojis in CSS Namen sollten allerdings einen Escape des Lesers auslösen.
Rolf
--
sumpsi - posui - obstruxi-
- es gibt nicht nur Emojis (➲ ♕※♚ ✁🂡⒑ ↯ 🅤⒮⒲ ☜)
- Leser bin ja, selbst wenn es mal fertig werden sollte, eigentlich nur ich; und mir sind
- an manchen Stellen die (möglichst aussagekräftigen) Darstellungen doch eine Orientierungshilfe: man findet sie schneller als “dicht gedrängte Folgen von ≳ 35 Zeichen“. Vor allem, wenn man herumscrollt, um etwas, vielleicht „verirrte Hinterlassenschaften“, zu entdecken. Oder irgendwie ähnliche Dinge‽ — Gut, dann hilft es, wenn es bunt wird.
🏑
-
-
Hallo Rolf,
Ich weiß nicht, was meine Tastatur sich dabei gedacht hat, aber da war plötzlich ein c mit einem ´ Akzent. Wer braucht denn sowas!?!?!?
Sprachen wie z.B. Serbisch oder Kroatisch brauchen das 😁
Einen schönen Tag noch
Martin--
Wo wir sind, ist das Chaos. Aber wir können leider nicht überall sein.-
@@Der Martin
Hallo Rolf,
Ich weiß nicht, was meine Tastatur sich dabei gedacht hat, aber da war plötzlich ein c mit einem ´ Akzent. Wer braucht denn sowas!?!?!?
Sprachen wie z.B. Serbisch oder Kroatisch brauchen das 😁
Die Serben nicht unbedingt, die können auch anders: ћ.
Aber jetzt wo du’s sagst: nicht zu vergessen Manuel Matuzović (bekannt für seine Artikel und Vorträge zu Frontend-Technologien und Barrierefreiheit und für die HTMHölle).
🖖 Живіть довго і процвітайте
--
Ad astra per aspera
-
-
Aber das mit dem Punkt ist so falsch, dass ich nie drauf gekommen wäre.
-
-
-
Hui, das wird ja hier schon ganz schön unübersichtlich. Also von wegen wer wem was geschrieben hat. Und wo man (ich) die diversen Fäden zusammenknüpfen könnte. Also einfach mal „hier“:
Die "neuen" Elemente wie article können nicht Schuld sein!
Den Weg habe ich, eigentlich nur als Versuchsballon, mit einer Kopie des Projektes unternommen, weil eben im Inspektor von denen nur manche aufgetaucht sind. Um vielleicht herauszufinden, wie der Browser, Safari, da unterscheidet. Das Dumme dran: so weit ließ er mich nicht kommen, packte gleich die nächste dicke Frage oben drauf.
Funktioniert
--div.article-width?Schnell mal ausprobieren, denn da steht, wenigstens mittlwereile, „nur“ noch (und wie davor)
--article-width. …Aha: ja, funktioniert: es sieht passend aus und im Inspektor gibt es auch kein „Mecker“. Jedenfalls nicht anders als „mit ohne „div.“ drin. Und ich sehe da jetzt auch kein Problem mit dem Namen: „--“ vorne dran, der Rest auch nur ASCII ohne spezielle Zeichenbedeutungen …? (Und auch die „Smileys“ als Name wurden und werden, soweit genutzt, nicht beklagt, dienen „nur“ als leicht zu entdeckende Stellen im Quelltext.)
Ganz persönlich:
cqbund die vielenminmax()ist mir zuviel Finetuningund
aber warum cq* ohne container???
Na ja, die waren ja nur noch drin, weil die da betroffenen Stellen „vorher“ ja schon relativ gut ausgesehen haben. Mir ging es da ja darum herauszufinden, „wer“ denn da „wem“ auf welche Art und Weise Vorgaben machen würde. An der Stelle standen also schon alle (un-)möglichen Angaben. Und der Zufall wollte, daß es gerade die waren, welche den nächsten „Rülpser“ verursacht haben.
Mittlerweile sieht diese „ohne
articleund Co“ Version wieder (so) gut aus (wie die davor). Allerdings durfte ich dafür an anderer Stelle ein davor (scheinbar?) funktionierendeswidth: …cqi;durch einwidth: …%;ersetzen. Also schon wieder: „wieso wollen die jetzt da schon wieder nicht?“BTW:
… und bei den anderen nur mit
frarbeitenDie nächste sich abzeichnende(!) Baustelle: „wie bringe ich den Kram dazu, daß
1frauch1frist?irgendein-element { grid: "a b c" 1fr "d e f" 1fr "g h i" 1fr / 1fr 1fr 1fr; }Liefet ja nur „nach Lust und Laune“ drei gleich breite bzw. hohe Grid-Zellen. (Ja, hat bstimmt mit den Inhalten zu tun; aber später …!)
Und: „das Stück Mozilla-Code“, das Pendant mit dem
repeat(3, 1fr)anstelle dreier1fr, setzt hier im Inspektor dann doch wider „Mecker“: „nicht unterstützter Eigenschaftswert“.-
Hallo,
Hui, das wird ja hier schon ganz schön unübersichtlich. Also von wegen wer wem was geschrieben hat.
ganz im Gegenteil: Gerade durch die Baumstruktur ist die Hierarchie der Beiträge eigentlich sehr übersichtlich visualisiert. Diese Übersicht vermissen ich in vielen
ForenBoards.Und wo man (ich) die diversen Fäden zusammenknüpfen könnte.
Zusammenknüpfen? Nur durch C&P, da wo es überhaupt sinnvoll ist.
Einen schönen Tag noch
Martin--
Wo wir sind, ist das Chaos. Aber wir können leider nicht überall sein.-
Na ja … von der Baumstruktur sieht man nicht mehr viel, wenn man zum Nachsehen „etwas weiter“ scrollen muß. Dazu dann noch zwei oder drei Reaktionen, denen eine gemeinsame Antwort zugestanden werden solll(te) …
Aber: ja, auch ich kenne Diskussions-Ecken, in denen das richtig schwierig ausfällt. Ein kleines Stück besser sind die heise-Foren. Aber auch da fallen die Verbindungslinien auch schnell so dicht gedrängt aus, daß man denen nicht mehr so recht folgen kann.
-
@@nix
Na ja … von der Baumstruktur sieht man nicht mehr viel, wenn man zum Nachsehen „etwas weiter“ scrollen muß.
Schon die Thread-Ansicht probiert?
🖖 Живіть довго і процвітайте
--
Ad astra per aspera-
Tja … damit sehe ich dann, „wo“ ich bin. Aber nicht mehr, „wer wem was …“.
-
-
-
-
Nach einer Portion weiterem Experimentierens kann ich jetzt sagen, daß „das mit den cqi“ jetzt an manchen Stellen funktioniert, wo es damit vorher Probleme gab.
Ansonsten gehe ich jetzt davon aus, daß da zwei Dinge aufeinander getroffen sind. Einmal eine nicht sehr gar gekochte Implementierung dieser Elemente, Einheiten usw. Und dann natürlich nicht wenige „Schüsse ins Blaue“ (Zwecks Erkundung dessen, was da machbar wäre und wie dies angestellt werden kann; vlt. vergleichbar mit diesem alten Spiel), die mit ihren doch oft überraschenden und verwirrenden Erscheinungen mir oft Wege gewiesen haben, die … na ja.
Immerhin: auch der Inspektor von Safari gibt oder gab sich verwirrt: als ich das mit den partiell nicht sichtbaren Tags gefunden habe, dann nur, weil die Darstellung der Layer aus einigen Textzeilen bestand. Und jetzt? Eine „hübsche“ 3D-Darstellung, die mit der Maus hin- und hergedreht werden kann und durch Anklicken der Rechtecke ein paar Detail-Infos offenbart. Aber: Tags, deren Namen, ihre Klassen usw., die muß ich jetzt erraten. (Und: da könnte es recht schnell sehr unübersichtlich werden. Grün auf Grün und ein dünner Rahmen …)
Außerdem hat er, der Inspektor, auch ab und an nach einem Beenden und erneuten Starten des Browsers verlangt: sein abgekoppeltes Fenster bleibt mittendrin einfach leer!
Die nächste Runde? Firefox und dessen Eigentümlichkeiten pflegen und sehen, wie es dann da funktioniert? Mal sehen. Immerhin: der ggT wäre ja von Interesse.
-
Nein, nicht FF. Safari ist dran. Ein eher kleines „Schmierzettel-Projekt“, in dem ich mit
counter()und Co ein paar Orientierungsmarken gesetzt hatte. Die gekürzte Struktur:<head> <style> /* Counter */ body { counter-reset: Staffel Episode Total; } article /* Staffeln */ { counter-reset: Episode; counter-increment: Staffel; } section /* Episoden */ { counter-increment: Episode Total; } section::before { grid-area: Meta; content: "Staffel " counter(Staffel) " Episode "counter(Episode) " (Total: " counter(Total) ")"; } … article { display: grid; grid: "Überschrift" min-content "Aufzählung" 1fr / 1fr; } section { container-type: inline-size; display: grid; grid: "Meta Titel" min-content "Meta Beschreibung" min-content "Meta Metadata" min-content / 20ch 1fr; } section > header { grid-area: Titel; … } section > main { grid-area: Beschreibung; } section > footer { grid-area: Metadata; } </style> </head> <body> <header>…</header> <article> <header>…</header> <section> <header>…</header> <main> … </main> <footer> … </footer> </section> </article> </body>Der Knackpunkt:
container-type: inline-size;. Mit der Zeile drin zählt da Safari nur noch von 0-0-0 nach 0-0-0. Abgesehen von extra eingefügten Zeilen zwischendrin (zwischen den „Artikeln“), die belegen, daß da z. B.Totalsehr wohl vorhanden ist und hochgezählt wird.Löscht man den
container-type, funktioniert das Zählen wie erwartet.Und: da verhält sich Firefox „brav“. Also falls der nicht noch irgend welche andere, noch nicht enteckte, Spezialiäten bzgl.
container-typebereit hält.
-
-
-
-
-
Wenn sie sich nicht innerhalb eines Containers befinden, verwenden sie Werte der Viewport-Abmessungen, aso hier 1vi oder 1vw.
Da kommt mir doch ein Verdacht! Und zwar für die Fälle, die ich schon erwähnt hatte. Da, wenn die Breite (die ist mir ja aufgefallen) größer war als das Browser-Fenster hergab: verwendet der Browser in „solchen Fällen“ (wie auch immer) vielleicht nicht mal den Viewport, wie er sich dem Anwender darstellt. Sondern dafür etwas, das der Breite des bis dahin errechneten Darstellungs-Modells entspricht? Also die Breite dessen, was nötig wäre, um den bisherigen Inhalt ohne Scroll-Balken darzustellen? Dann wären 100cqi ja schnell mal mehr als 100vi!
