nix: Frage zum Wiki-Artikel „container-type“

problematische Seite

„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!

  1. problematische Seite

    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
    1. problematische Seite

      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!
    2. problematische Seite

      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.

      1. problematische Seite

        Servus!

        Gemeckert hat Safari.

        Laut caniuse hat container-type eine 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!
        1. problematische Seite

          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 …“ 😟

      2. problematische Seite

        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
        1. problematische Seite

          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.

          1. problematische Seite

            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
    3. problematische Seite

      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 …

  2. problematische Seite

    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

    Container-Query-Einheiten

    Da hatte mich @nix mit seiner Frage nach der Berechnung der neuen cqi-Einheit angestupst.

    • Innerhalb eines Containers entspricht 1cqi 1% 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 1vi oder 1vw.

    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!
    1. problematische Seite

      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
      1. problematische Seite

        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!
        1. problematische Seite

          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!
    2. problematische Seite

      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 auch div.article anstelle von article. 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 … 🤯

      1. problematische Seite

        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.article anstelle von article.

        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: cqb und die vielen minmax() ist mir zuviel Finetuning - ich würde immer nur eine Spalte / Zeile mit minmax() setzen und bei den anderen nur mit fr arbeiten. Dito em anstelle 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!
        1. problematische Seite

          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
          1. problematische Seite

            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__content notiert. 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?

            1. problematische Seite

              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-width ein 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

              1. Ich weiß nicht, was meine Tastatur sich dabei gedacht hat, aber da war plötzlich ein c mit einem ´ Akzent. Wer braucht denn sowas!?!?!? ↩︎

              1. problematische Seite

                @@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
                1. problematische Seite

                  @@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
              2. problematische Seite

                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-width ein 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!

                1. Ich weiß nicht, was meine Tastatur sich dabei gedacht hat, aber da war plötzlich ein c mit einem ´ Akzent. Wer braucht denn sowas!?!?!? ↩︎

                1. problematische Seite

                  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
                  1. problematische Seite

                    1. es gibt nicht nur Emojis (➲ ♕※♚ ✁🂡⒑ ↯ 🅤⒮⒲ ☜)
                    2. Leser bin ja, selbst wenn es mal fertig werden sollte, eigentlich nur ich; und mir sind
                    3. 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.

                    🏑

              3. problematische Seite

                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.
                1. problematische Seite

                  @@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
            2. problematische Seite

              Aber das mit dem Punkt ist so falsch, dass ich nie drauf gekommen wäre.

              Wieso eigentlich nicht?

        2. problematische Seite

          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: cqb und die vielen minmax() ist mir zuviel Finetuning

          und

          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 article und Co“ Version wieder (so) gut aus (wie die davor). Allerdings durfte ich dafür an anderer Stelle ein davor (scheinbar?) funktionierendes width: …cqi; durch ein width: …%; ersetzen. Also schon wieder: „wieso wollen die jetzt da schon wieder nicht?“

          BTW:

          … und bei den anderen nur mit fr arbeiten

          Die nächste sich abzeichnende(!) Baustelle: „wie bringe ich den Kram dazu, daß 1frauch 1fr ist?

          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 dreier 1fr, setzt hier im Inspektor dann doch wider „Mecker“: „nicht unterstützter Eigenschaftswert“.

          1. problematische Seite

            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 Foren Boards.

            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.
            1. problematische Seite

              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.

              1. problematische Seite

                @@nix

                Na ja … von der Baumstruktur sieht man nicht mehr viel, wenn man zum Nachsehen „etwas weiter“ scrollen muß.

                Schon die Thread-Ansicht probiert?

                Kopf der Forum-Seite

                🖖 Живіть довго і процвітайте

                --
                Ad astra per aspera
                1. problematische Seite

                  Tja … damit sehe ich dann, „wo“ ich bin. Aber nicht mehr, „wer wem was …“.

          2. problematische Seite

            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.

            1. problematische Seite

              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. Total sehr 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-type bereit hält.

    3. problematische Seite

      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!