国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Heim Web-Frontend CSS-Tutorial % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei

% CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei

Jan 18, 2025 am 06:10 AM

Dies ist eine direkte Fortsetzung von ?Abrufen von 32-Bit-API-Antwortdaten in CSS“

In CSS waren 16 Bit Antwortdaten, sowohl in der intrinsischen Breite als auch in der intrinsischen H?he platziert, eine enorme Verbesserung im Vergleich dazu, dass API-Antwortdaten überhaupt nicht abgerufen werden konnten (ohne JavaScript)...

Aber in den Tagen, nachdem ich es herausgefunden hatte, neigten meine Gedanken zu einer Richtung:
Es würde viel mehr Spa? machen, wenn es 16 Bit 32 Mal w?re, statt nur zweimal.

Gif recording of a harsh terminal app setting several integer values to an array of variables one at a time

Packen von 512 Bit in ein SVG zur Exfiltration

Ich meditierte vor dem Schlafengehen und kam pl?tzlich auf einen weiteren inspirierten Gedanken -

?Was w?re, wenn es für das Bilddokument selbst m?glich w?re, seine eigene intrinsische Gr??e zu animieren?“

Die übliche Kette von Erkenntnissen nach einem inspirierten Gedanken blitzte mit dem Verst?ndnis auf, wie es erreicht werden k?nnte ... Ich musste nur herausfinden, ob ein solcher Bildtyp existiert.

Ich schnappte mir mein Handy und durchsuchte alle mir bekannten animierten Bildformate, um zu sehen, ob eines davon dazu in der Lage war. svg, webp, apng, gif, vielleicht seltsame Videoformate? Ich konnte keine finden.

Am Morgen sagte etwas in mir, ich solle weiter in SVG graben.

Ich habe eingebettetes CSS, Medienabfragen, verwendete Defs und weitere verwendete Defs ausprobiert, bin in die zahlreichen SVG-Animationsdokumente eingetaucht, habe versucht, sie auszutricksen, und habe mich über andere Ideen und Eigenschaften im Zusammenhang mit Animationen informiert – nichts konnte mich durchhalten H?he oder Breite einstellen.

Aber dieser letzte Link hat mich zum Nachdenken gebracht...

...was ist mit viewBox? Ich müsste noch einige andere Hürden überwinden, aber ... Ist das m?glich, es zu animieren?

vvv
ES IST!!
^^^

Den L?sungsraum sortieren

Das Problem besteht nun darin, dass, wenn Sie keine Breiten- und H?henattribute für das Root-SVG-Element festlegen und dann versuchen, die SVG-Datei als Inhalt für ein Pseudo zu verwenden, diese 0 x 0 Pixel rendert, da es sich um ein Vektordokument handelt und nicht mehr über ein Vektordokument verfügt Eigengr??e.

Also habe ich es gesucht und ?ertainAspectRatio“ hinzugefügt ... Immer noch 0x0 ... aber dann habe ich in meinem CSS die Breite auf 10 Pixel festgelegt und das beibehaltene Seitenverh?ltnis der ViewBox die H?he bestimmen lassen (die ich mit ?ndern kann). (im SVG eingebettete Animation) uuuund... das HTML-Element, das es enth?lt, ist auf die erwartete H?he gewachsen.

:3

Wenn es nur einen Frame g?be, würde dieser meine ursprünglichen 32 Bit nehmen und ihn halbieren; da nur eine Dimension exfiltriert werden kann, w?hrend die andere statisch ist.

ABER! Nun, meine zweite Dimension war Zeit und die erste ist der Gnade der Zeit ausgeliefert, es stehen also mehr als genug Daten zur Verfügung.

Wie aufregend!

Ich habe alles über die Steuerung der Animation in SVGs gelernt und ein serverseitiges Skript erstellt, um mein erstes animiertes SVG zu generieren:

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

(Warum PHP?! - weil ich bereits einen Server hatte, für den ich jahrelang bezahlt habe und der von Anfang an so eingerichtet war, dass er PHP ausführt ... Und obwohl ich mit JavaScript und Node. einen wunderbaren Lebensunterhalt verdient habe Wirklich gut, manchmal macht es Spa?, jede einzelne Funktion, jeden einzelnen Operator und jede einzelne Syntax nachzuschlagen, um etwas durchzugehen, von dem Sie wissen, dass Sie es k?nnen tun k?nnen, ohne Einzelheiten zu kennen. lol)

Lassen Sie uns nun meinen ersten % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei aus dem vorherigen Artikel teilen, um zu sehen, wie CSS auf --vars reagiert und die Gr??e ?ndert, w?hrend das SVG voranschreitet:

Best?tigt! Wir k?nnen die Gr??en?nderung ablesen. Wie im vorherigen Artikel wird am Ende die View-Timeline-Messtechnik anstelle dieser tan(atan2())-Technik verwendet.

Es bringt meine CPU zum Kochen, sodass wir sie aus dem Inhalt entfernen m?chten, wenn die Exfiltration abgeschlossen ist.

Konzeptionell, wie man 1D-Zeit prozedural exfiltriert

Die obige Demo ist für sich genommen nicht sehr nützlich. Es meldet eine Kopie der H?he, wann immer sie vorhanden ist, aber wir müssen sie speichern ... und was nützen eine Reihe von 16-Bit-Werten, wenn Sie die Reihenfolge nicht kennen und ihr nicht vertrauen k?nnen?

Ich wei?, dass ich mit dem CPU-Hack Werte in CSS akkumulieren und mathematisch bestimmen kann, welche --var eingehende Werte aktualisiert, anstatt nur den vorherigen Wert beizubehalten, sodass ich mir keine besonderen Gedanken über CSS machen muss. Wie k?nnten wir im Allgemeinen 1D im Laufe der Zeit exfiltrieren?

Sentinel-Werte zur Rettung!

Die Gr??e des von uns genutzten Messbereichs MUSS nicht auf 16 Bit begrenzt sein, auch wenn ich die Datenpakete selbst auf 16 Bit beschr?nken m?chte. Da k?nnen wir also auch ein paar W?chter reinpacken. css-api-fetch wird mit der F?higkeit ausgeliefert, Werte bis zu 99999 zu verarbeiten, was deutlich über 65535 (der 16-Bit-Obergrenze) liegt.

Was müssen wir also wissen?

Auf welche Probleme k?nnten wir sto?en?

Wenn zwei Werte in unseren Daten hintereinander gleich sind, ben?tigen wir eine Unterbrechung, um zu wissen, dass es sich um zwei unterschiedliche Pakete handelt. Ich habe bereits beschlossen, dass wir 512 Bit anstreben, daher muss die SVG-Animation maximal 32 16-Bit-Datenrahmen haben, mit Sentinel-Rahmen dazwischen ...

Wenn sich die CPU überlastet anfühlt, kann es so aussehen, als würde die SVG-Animation einzelne Schritte vollst?ndig überspringen. Das hei?t, wir brauchen eine M?glichkeit, immer zu wissen, in welchem ??Schritt wir uns befinden. Anstelle eines einzelnen ?zwischen Datenrahmen“-Sentinels verwenden wir also den Datenindex (basiert auf 1 wie CSS-nth-*-Selektoren) als Sentinel-Wert und machen ihn so zu einem eigenen diskreten Schritt vor dem diskreten Schritt, der die Daten für diesen Index anzeigt.

Sentinel-Index -> Daten -> Sentinel-Index -> Daten ...

Das l?sst uns auch wissen, wann es eine Schleife gibt, m?glicherweise, wenn wir Sentinel 1 erreichen.

Aber woher wissen wir, dass es nicht zu einem anderen Datenrahmen gesprungen ist und wir es versehentlich im falschen Slot aufgezeichnet haben?

Wir müssen es in einer Schleife laufen lassen und weitermachen, bis es richtig ist, und der beste Weg, um herauszufinden, ob die Daten korrekt sind, ist eine Prüfsumme! Wir brauchen also einen weiteren Datenrahmen und einen W?chter für diesen Wert.

Erstellen des Prüfsummenalgorithmus

Ich k?nnte CSS-Bin-Bits verwenden, um alle Daten mit XOR zu versehen, aber das ist ziemlich umfangreich und wird nirgendwo anders ben?tigt – entscheiden wir uns für eine Alternative, die einfach in CSS zu realisieren ist.

Mathematisch ausgedrückt: Wenn Sie einen 16-Bit-Wert nehmen, ihn durch 256 dividieren (von der Untergrenze zur Ganzzahl) und den 16-Bit-Wert erneut modulo durch 256 nehmen, erhalten Sie die High- und Low-Bytes. Addieren Sie diese 8-Bit-Werte und Sie erhalten 9 Bit. Das scheint ein vernünftiger Prüfsummenansatz zu sein, aber lasst uns noch einmal darauf zurückkommen.

Wir müssen nicht im 16-Bit-Bereich bleiben, um die Prüfsumme zu berechnen, solange die endgültige Prüfsumme 16 Bit betr?gt, also summieren wir einfach alle (bis zu) 32 Werte.

Wir müssen jedoch auf falsche Speicherschreibvorg?nge aufgrund übersprungener Frames achten, also addieren wir die geraden Indexwerte zweimal, damit einen Anschein von Ordnung besteht.

Diese Summe, 16-Bit-Werte, 32 Mal, plus weitere 16 Mal, ergibt etwa 22 Bit. Teilen und modulieren Sie 11 Bits auf jeder Seite, kehren Sie zum vorherigen Gedanken zurück, addieren Sie diese dann und erhalten Sie 12 Bits als unsere Prüfsummenantwort.

Scheint vernünftig... Es ist nicht v?llig fehlersicher, aber das SVG müsste mehrere Schritte überspringen, um es so durcheinander zu bringen, dass VIELLEICHT jetzt die gleiche Prüfsumme generiert wird... Auf jeden Fall senden wir auch die Daten zurück L?nge und beziehen Sie diese auch in die Prüfsumme ein, indem Sie sie einfach als letzten Schritt unserer Prüfsumme hinzufügen. Die maximale Datenl?nge (Anzahl der 16-Bit-Werte, die wir verarbeiten m?chten) betr?gt nur 32, sodass die Addition des L?ngenwerts zu den 12 Bits nicht ann?hernd über 16 Bit hinausgeht. Juhu!

Spoiler: Das ist habe ich gemacht, aber CSS wurde irgendwo bei etwa 21 Bit verlustbehaftet, also habe ich es aufgeteilt und effektiv den gleichen Algorithmus durchgeführt, aber jeweils in kleineren Teilen. Serverseitig verwendet das Alg genau wie beschrieben.

Technisch gesehen spielt es bei dem von uns beschriebenen Setup keine Rolle, wie die Reihenfolge in der Animation ist, solange jeder Sentinel Ihnen mitteilt, welchen Index der n?chste Frame in der Daten.

Noch etwas: Lassen Sie uns den Datenl?ngenwert zuerst in die Antwort einfügen und auch dafür einen Sentinel hinzufügen (Sentinel in der SVG-Animation vor dem Wert, wie bei den restlichen Daten).

Das sind 34 W?chter. Die SVG-ViewBox-H?he darf nicht 0 sein, und CSS profitiert davon, wenn 0 intern keine Daten darstellt. Nehmen wir also an, wir haben 35 Sentinels, wobei 0 absichtlich nicht verwendet wird.

Alle Datenrahmen werden jetzt in das SVG eingebettet, wobei 35 zu ihrem Wert hinzugefügt werden. L?ngen- und Prüfsummendatenwerte erhalten AUCH 35 zum Viewbox-Wert hinzugefügt. Die ViewBox-H?hen in der SVG-Animation, die die W?chter darstellen, haben Werte von 0 bis 34 (0 wird übersprungen) und sagen uns jeweils genau, was der n?chste Frame in der SVG-Animation darstellt.

CSS-Seite prüfen wir nur, ob die Rohmessung gr??er als 34 ist, es handelt sich um Daten, also subtrahieren Sie 35 davon, wenn es weniger als 35 ist, handelt es sich um einen Sentinel.

A meme picture of Charlie Day from It's Always Sunny in Philadelphia with a crazed look standing in front of a board covered in paper with red lines connecting them hectically

Beginnen Sie mit der Exfiltration der 512 Bits mit CSS

Nachdem ich die PHP-Seite zum Generieren der SVG-Animation wie beschrieben fertiggestellt hatte, dachte ich über bestimmte M?glichkeiten nach, wie ich das CSS für diesen Exfiltrationsprozess starten k?nnte.

Hier ist der PHP-Code!
<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

Es gibt einige M?glichkeiten, dies in CSS zu erreichen, und mit den jüngsten Spezifikationserg?nzungen werden m?glicherweise noch viele weitere hinzukommen.

Mein erster Ansatz ist konzeptionell der einfachste: Ich verwende eine Ansichtszeitleiste für jedes Datenelement und mache immer wieder das Gleiche. Es funktionierte, aber ich st?hnte w?hrend meiner Fortschritte, unzufrieden darüber, wie ekelhaft es war. Das w?ren fast 40 Animationen auf :root, wenn ich fortfahre.

Also ging ich schlafen.

Als ich aufwachte, lag ich einige Momente da und schaute l?chelnd aus dem Fenster, mit dem Gefühl, gerade aufgewacht zu sein oder meditiert zu haben, dann schoss mir eine Flut von Gedanken durch den Kopf. Ich drehte mich um, schnappte mir mein Notizbuch und den n?chstgelegenen Stift, setzte mich im Bett auf und begann, den Algorithmus aufzuschreiben, um ihn mit nur 6 CSS-Animationen herauszufiltern.

my chicken scratch handwriting on a single piece of lined notebook paper with arrows pointing to a couple of nested boxes detailing the method described below

Buchst?blich auf dem Papier gel?st; GENAUso wird es umgesetzt.

Ich stand auf, setzte mich an meinen Computer, ignorierte meine vorherige Arbeit und ?ffnete einen neuen % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei.

Ich habe die 4 HTML-Elemente eingerichtet, die dort im Chicken Scratch angegeben sind, und dann das CSS-Bedienfeld mit Notizen rund um die 4 entsprechenden leeren Klassenselektoren überflutet. Es wird jetzt nicht auf :root sein, aber wir k?nnen alles, was darauf angewiesen ist, darin platzieren.

Keine einzige Funktionalit?t wurde hinzugefügt, bis die Notizen vom Papier kopiert und detaillierter in % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei geschrieben wurden.

Als ich fertig war, habe ich einfach die Notizen gelesen und angefangen, das Gesagte umzusetzen, bis hin zum endgültigen Arbeitsergebnis.

(Ich habe ?20“ statt ?35“ geschrieben, weil ich mit 256 Bit testen wollte)

Ich werde n?her darauf eingehen, wie es funktioniert. Aufgrund der Ansichtszeitleiste und des Zeitleistenbereichs k?nnen Sie Daten so einrichten, dass sie in einer Art Klein-Flasche-Form einflie?en, wenn Sie sich vorstellen k?nnen, wie die Oberfl?che animiert und in das ?Loch“ gesaugt wird, zurück zur schmalen Oberseite und nach unten wieder über die Oberfl?che, gewinnt durch Dom-Schichten an Gr??e und Komplexit?t und schl?ngelt sich dann zurück durch das Schwarze Loch in das h?here Bewusstsein (:root).

Es ist gr??tenteils vertikal zyklisch (und nicht haupts?chlich horizontal zyklisch oder statisch zyklisch)

Exfiltrieren der 512 Bit mit CSS

Die Notizen haben wir leicht optimiert und klarer gemacht:

256 Test -> 512 endgültig

und ich habe darin einen Pr?sentationsknoten hinzugefügt, was gro?artig ist, weil ich auch die Interna anzeigen kann, w?hrend der Algorithmus ausgeführt wird.

Aber hier sind die letzten Anmerkungen ohne den ganzen Implementierungs- und Pr?sentationsl?rm. Hier wird genau beschrieben, wie das Ganze funktioniert.

Es ist vielleicht nicht in gutem Zustand, dass ein Artikel so viele Details extern eingebettet hat, aber ich werde jeden Teil aufschlüsseln, um zu zeigen, wie er umgesetzt wird.

Hauptcontroller

Oben in dieser Struktur befinden sich 4 Zeitleistenwerte und ihre Animationen. Also lasst uns diese einfach reinstecken.

Der wichtigste Teil des Datenflusses, der dadurch erm?glicht wird, besteht darin, dass wir tief im DOM verschachtelte Daten wieder auf einen Host (Zeitachsenbereich) übertragen k?nnen. Da es nicht effizient ist, m?chten wir die H?ufigkeit, mit der wir es tun, begrenzen. Jede registrierte Eigenschaft und ihre Animation k?nnen ein einzelnes Datenelement vertikal hosten. Der Wert der Daten wird durch die Inline- oder Blockansichtsposition eines Elements irgendwo tief in der Struktur bestimmt – zu diesem Teil kommen wir sp?ter.

(Siehe das oben eingebettete Schleifenbeispiel für ein klareres Bild des Datenflusses)

Die vier Daten, die wir hier erheben, sind:

--xfl-cpu-phase – Dies ist ein numerischer Wert von 0 bis 4, der anzeigt, welche Phase des CPU-Hacks gerade ausgeführt wird. (Ein einzelner ?Frame“ des CPU-Hacks besteht aus 4 bis 5 CSS-Renderframes, eine Schleife der Phasen ?tickt“ den CPU-Hack) Ich werde dies sp?ter in diesem Artikel genauer demonstrieren.

--xfl-raw-data – Hier wird die H?he des SVG gehostet, wo immer sich das SVG in seinem Animationszyklus befindet. Unsere Rohdaten. Wie bereits erw?hnt, ist dieser diskrete Schritt der SVG-Animation ein Sentinel-Wert, wenn dieser Wert kleiner als 35 ist. Wenn er gr??er als 34 ist, ist dieser diskrete Schritt der SVG-Animation unser 16-Bit-Wert 35, was dem entspricht, was der vorherige Sentinel angegeben hat.

--xfl-data-type – Dies ist der aktuellste Sentinel-Wert. Dieser Wert ?ndert sich nicht, bis der n?chste Sentinel angetroffen wird. Es gibt eine CSS-Frame-Verz?gerung von der Einstellung von --xfl-raw-data bis zur Einstellung dieses Werts.

--xfl-data-value – Dies ist der aktuelle Datenwert, nachdem 35 vom Rohwert abgezogen wurde, oder 0, wenn wir diesen Schritt der Sequenz noch nicht erreicht haben. Es gibt eine CSS-Frame-Verz?gerung von der Einstellung von --xfl-data-type bis zur Einstellung dieses Werts.

Ich habe den SVG-Animation-Current-State-Reporter auch pr?ventiv in einen Zustand verpackt, der nur über Funktionalit?t verfügt und das animierte SVG nur l?dt, w?hrend der Prozess unvollst?ndig ist. (also werden alle Interna aus dem Speicher entfernt und das umfangreiche animierte SVG wird aus dem Rendering entfernt, wenn wir fertig sind)

Die Keyframe-Werte reichen von einem Maximalwert für dieses Datenelement bis 0. Ich werde sp?ter erkl?ren, warum diese rückw?rts sind – suchen Sie nach dem Bild der Uno Reverse-Karten.

CPU-Exfiltrator

Als n?chstes richten wir die Grundbausteine ??für einen CPU-Hack ein

Das CPU-Hack-Boilerplate folgt lediglich einem Variablennamenmuster, um Erfassungs- und Hebeanimationen einzurichten.

Wenn wir eine Ganzzahl --xfl\1 haben, die wir horizontal (im Laufe der Zeit) durchlaufen m?chten, registrieren wir sie und richten Erfassungs- und Hebeanimationen wie folgt ein:

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

Schlie?en Sie dann die zyklische Zuweisung für das .cpu-exfiltrator-Element ab, in dem die beiden CPU-Animationen gehostet werden. Ich mache es vorerst nur für einen der Werte:

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

In Chrome werden sie nicht statisch durchlaufen (werden zum Anfangswert), es sei denn, beide Animationen werden gleichzeitig ausgeführt. Das ist ein FANTASTISCHER Nebeneffekt dessen, was wahrscheinlich eine Optimierung pausierter Animationen beim Festlegen numerischer Eigenschaften ist.

Da wir schlie?lich eine neue automatische Version des CPU-Hacks verwenden (Sie müssen nicht mit der Maus darüber fahren, um die Phasen zu durchlaufen, wie im ursprünglichen Hack), verknüpfen wir die Variable --xfl-cpu-phase vom vorherigen (hier auf dem übergeordneten Element gehostet, sodass wir Stilabfragen verwenden k?nnen, um darauf zu reagieren) und den Wiedergabestatus unserer Animationen steuern.

Wir geben auch --cpu-next-phase aus, das sp?ter wieder an die Spitze gehoben wird und den n?chsten Wert für --xfl-cpu-phase anhand seiner Ansichtsposition und seines Zeitachsenbereichs festlegt.

Ich habe eine zus?tzliche Phase hinzugefügt, um den CPU-Hack anzuhalten, bis die SVG-Animationsmessung erfolgreich im n?chsten --xfl-data-type blockiert wurde

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

(So wie es jetzt ist, ist der Datentyp immer noch 0, so dass, sobald die n?chste Phase angeschlossen ist, der CPU-Hack bereits eine Schleife durchl?uft. Sobald wir einen Datentyp-Sentinel haben, wird er nicht in einer Schleife ausgeführt, bis wir ihn haben habe es absichtlich mit dem 0-Sentinel gel?scht)

Sp?ter werden wir auch die erw?hnte Bedingung hinzufügen, um zu verhindern, dass CPU-Phase 1 startet, bis alle Daten vorhanden sind. Dadurch wird sichergestellt, dass wir den CPU-Hack zwischen der Sperrung des Datentyps (Sentinel) und der Sperrung des Datenwerts (Rohwert – 35) in seiner Erfassungsphase belassen wollen. Es ist also ?bereit, bereit zu sein“, wie Abraham Hicks sagen würde.

Ich werde alle 32 Werte plus Prüfsumme und L?nge registrieren, die die SVG-Animation voraussichtlich melden wird.

Da die Registrierung von --xfl\1 bis --xfl\32 ein gro?er Block ist und die CPU-Animationen ebenfalls nur Standardanimationen sind, werde ich alle diese an das Ende des Hack-Setups verschieben, damit sie in Zukunft ignoriert werden.

Automatischer CPU-Hack

Dadurch wird die n?chste CPU-Phase mit dem Wert --xfl-cpu-phase verkabelt

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

Hier gibt es einige CSS-Grundbausteine, um das Element zu einem Scroll-Container zu machen und es vom Bildschirm zu entfernen. Der wichtige Teil ist:

view-timeline: --xfl-cpu-phase inline;

Das besagt, wo der rechte Rand dieses Pseudoelements in seinem 100 Pixel breiten übergeordneten Element liegt. Verknüpfen Sie es als ?Fortschritt“ von links mit unserer Animation, die sich von 0 auf 4 bewegt ... 25 Pixel sind also zu 25 % vollst?ndig. was 1 entspricht, wenn 25 % zwischen 0 und 4 liegen.

picture of two 'reverse' cards from Uno Bild stammt aus einer Google-Suche, die zu Twitter führt

TECHNISCH ist die Animation 4 zu 0 und TECHNISCH wird vom rechten Rand des Pseudos aus gemessen, w?hrend die Ansicht nach rechts verl?uft. Das 25 Pixel breite Pseudo ist also 75 % von der rechten Seite seines 100 Pixel breiten Scroll-Elternteils entfernt und wird einem Wert von 1 zugeordnet, wenn 75 % zwischen 4 und 0 liegt.

Es ist einfacher zu verstehen, wenn Sie die umgekehrte Umkehrmathematik nicht kognitiv verarbeiten und einfach akzeptieren, dass das Endergebnis ein einfacher Fortschritt von 0 bis 4 ist, da der Maximalwert in der Animation 4 ist (wiederum ignorieren Sie, dass die Animation startet). um 4).

Schreiben wir auch den Bereitschaftszustand, der die CPU in Phase 0 h?lt, bis die Daten bereit sind. Der Hinweis befindet sich in Zeile 64 unserer Demos:

Daten bereit = Datentyp > 0 && raw-frame-data - 35 === data-value

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

Warte, === in CSS?

Diese sind jetzt ziemlich veraltet und ich würde sie heute anders machen, geschrieben, bevor ?clamp()“ die Grundlinie war, aber ich ?ffne immer diesen alten Codepen, um gedankenlos numerische Komparatoren zu kopieren und einzufügen, wenn ich sie brauche. Es w?re ein guter Artikel, diese zu aktualisieren und zu erkl?ren, aber in der Zwischenzeit geht es los: https://codepen.io/propjockey/pen/YzZMNaz

Lesen der SVG-Animation

Dies ist anfangs SEHR dem Abschnitt ?CPU-Exfiltrator“ ?hnlich, da es sich um die gleiche Technik handelt, bei der Daten von hier im DOM gemessen und nach oben dorthin verschoben werden, wo sie gehostet werden (Bereich).

Wir messen und melden die letzten drei Werte für das Basiselement, das wir ursprünglich eingerichtet haben.

Auf ::bevor wir das SVG rendern und --xfl-raw-data unter Verwendung der Blockansichtsposition festlegen, die das Ma? für die H?he des animierten SVG ist. (Denken Sie daran, dass wir die Breite auf 10 Pixel festlegen)

Auf ::after setzen wir --xfl-data-type inline (Sentinel-Werte 0 bis 34) und --xfl-data-value block (16-Bit-Werte).

Das übergeordnete Element muss breit genug sein, um das SVG darzustellen (mindestens 10 Pixel) und genaue Messungen für die Sentinel-Werte (0 bis 34) bereitzustellen.

Das übergeordnete Element muss au?erdem gro? genug sein, um 16-Bit-Werte messen zu k?nnen (35). Da wir im ersten Schritt einen Maximalwert von 100.000 festgelegt haben, verwenden wir diesen einfach, auch wenn er etwa 30 % gr??er ist als wir ben?tigen.

Und verschieben Sie es vom Bildschirm nach oben und links, damit keine Bildlaufleisten entstehen.

Deshalb

.svg-animation-current-state-reporter

erh?lt

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

und davor wird

@keyframes capture {
  0%, 100% {
    --xfl\1-captured: var(--xfl\1);
  }
}

@keyframes hoist {
  0%, 100% {
    --xfl\1-hoist: var(--xfl\1-captured, 0);
  }
}

und ::after gets

  --xfl\1: calc(
    var(--xfl\1-hoist, 0) + 1
  );

Im Wesentlichen ist das Speichermedium für diese Nachwerte hier die Ansichtsposition eines quadratischen 1-Pixel-Pseudos gegenüber seinem übergeordneten Scroll-Container. Wir subtrahieren 1 Pixel in den linken und oberen Berechnungen, da das Pseudo selbst 1x1 ist und wir m?chten, dass es 0 meldet, wenn der entsprechende Wert 0 ist.

Das ist alles sehr ?hnlich zu dem, was zuvor gemacht wurde.

Die Berechnung dieser Werte ist mit mehreren Komplexit?ten verbunden, wie aus dem Hinweis hervorgeht:

  @container style(--xfl-cpu-phase: 4) {
    animation-play-state: paused, paused;
    --cpu-next-phase: calc(
      min(1, var(--xfl-data-type)) * 4
    );
  }

Der Schlüssel zum Verst?ndnis der L?sung dieses Problems besteht darin, dass jeder Komparatorwert entweder auf 0 oder 1 gesetzt wird. 1, wenn er wahr ist, 0, wenn er falsch ist. Dann multiplizieren Sie es mit einem bestimmten Wert. Wenn es falsch ist, bleibt das Ergebnis 0, andernfalls wird es zu dem, was auch immer der Wert ist.

Ana Tudor geht hier ausführlich darauf ein, wie diese Idee funktioniert

Wenn wir diesen Vergleich dann zweimal durchführen, mit einem anderen oder entgegengesetzten Vergleich für den zweiten Wert, und sie addieren (wobei sichergestellt wird, dass h?chstens einer der Komparatoren 1 ist), dann bedeutet die Addition von zwei von ihnen nur ?sonst“. wenn".

Wenn nicht bereit *, verwenden Sie den alten Wert, sonst
Wenn es bereit ist *, verwenden Sie diesen neuen Wert

Auf diese Weise behalten wir den Sentinel-Wert über die Dauer des diskreten Schritts der SVG-Animation für den Wert bei, nachdem der Typ bereits gemeldet wurde.

Der CSS-Code, der es implementiert, beginnt hier in Zeile 191, direkt über dem gro?en Block von --xfl\...-Eigenschaftsregistrierungen, den wir unten platziert haben
@property --xfl\1 { syntax: ""; Anfangswert: 0; erbt: wahr; }
...
und es enth?lt zus?tzliche Hinweise:

Festlegen spezifischer CSS--var-Werte (adressierte Zuweisungen)

Die Logik, die wir gerade angesprochen haben, ist genau das gleiche Konzept, das wir für alle --xfl\1, 2, 32 Werte verwenden.

<?php header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate attributename="viewBox" dur="' . $dur . 's" fill="freeze" begin="0.1s;" values="' . $values . '" keytimes="' . $keytimes . '" repeatcount="indefinite" calcmode="discrete"></animate>
  ';
?>

Sie lesen --xfl-set\1 so, als ob --xfl-data-type gleich 1 w?re, verwenden Sie --xfl-data-is-ready mit einem impliziten else 0

--xfl-data-is-ready wurde früher als Flag etabliert, das uns in Phase 0 h?lt, bis es Zeit ist, zu Phase 1 zu wechseln.

Das bedeutet, dass unsere Bedingung && Logik ist. Zum Bestehen müssen beide Flags 1 sein.

Dann lesen Sie weiter --xfl\1, als ob --xfl-set\1 --xfl-data-value (den aktuellen SVG-Animationswert) verwenden würde, andernfalls, wenn NICHT --xfl-set\1 verwenden würde -- xfl\1-hoist (der vorherige Wert, den der CPU-Hack für --xfl1 hielt)

Dies ist sehr repetitiv und beschreibt fast den gesamten Rest dieser Exfiltration.

Die letzten Schritte bestehen darin, grundlegende calc()- und mod()-Mathematiken auszuführen, um die Prüfsumme wie zuvor beschrieben zu erstellen, und dann die in der SVG-Animation eingebettete Prüfsumme zum CPU-Hack hinzuzufügen, damit wir wissen, wann die berechnete Prüfsumme === ist vollst?ndig. Alles beim Alten.

Jetzt ist es also soweit. :)

Pr?sentation: Der CSS Animated SVG Exfiltration Hack

Da ich jedem einzelnen Teil dieses Hacks einen Wert pro Element zeigen wollte, ist die Pr?sentation dafür widerlich umfangreich. über 2000 Zeilen HTML und über 400 Zeilen CSS. Au?erdem verwende ich CSS-Bin-Bits, um jedes Register in Bin?rdateien usw. umzuwandeln.

(Klicken Sie unten rechts im Codepen-Frame auf ?Neu ausführen“, um den Vorgang in Echtzeit zu sehen!)

Kein JavaScript!


Kontakt ?ffnen?

Wenn Sie das toll finden und mehr erfahren m?chten, wenden Sie sich bitte an uns! Bei Fragen stehe ich jederzeit gerne zur Verfügung.

% CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei DEV Blog % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei
% CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei DEV Blog % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei % CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei

?@JaneOri.% CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei

?@Jane0ri

Das obige ist der detaillierte Inhalt von% CSS: Abrufen und Herausfiltern von Teilen servergenerierter Daten, eingebettet in eine animierte SVG-Datei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erkl?rung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Hei?e KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?e Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist 'Render-Blocking-CSS'? Was ist 'Render-Blocking-CSS'? Jun 24, 2025 am 12:42 AM

CSS -Bl?cke Seitenrenderung, da Browser inline und externe CSS standardm??ig als wichtige Ressourcen anzeigen, insbesondere mit importierten Stylesheets, Header gro?er Mengen an Inline -CSS und nicht optimierten Medienfragestilen. 1. extrahieren kritische CSS und einbetten Sie es in HTML ein; 2. Verz?gerung des Ladens nichtkritischer CSS durch JavaScript; 3.. Verwenden Sie Medienattribute, um das Laden wie Druckstile zu optimieren. 4. Komprimieren und verschmelzen CSS, um Anfragen zu reduzieren. Es wird empfohlen, Tools zum Extrahieren von Schlüssel -CSS zu verwenden, REL = "Vorspannung" zu kombinieren, und verwenden Sie die asynchrone Belastung und verwenden Sie die Medienverz?gerungsladeverletzung, um eine überm??ige Aufteilung und eine komplexe Skriptsteuerung zu vermeiden.

Externe vs. interne CSS: Was ist der beste Ansatz? Externe vs. interne CSS: Was ist der beste Ansatz? Jun 20, 2025 am 12:45 AM

ThebestApproachforcssDependsonTheProject'Sspecificneeds.forlargerProjects, externalcssisbetterDuetomaintainability;

Muss mein CSS im unteren Fall sein? Muss mein CSS im unteren Fall sein? Jun 19, 2025 am 12:29 AM

Nein, cssdoesnothavetobeinlowercase.

CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt CSS -Fallempfindlichkeit: Verstehen, worauf es ankommt Jun 20, 2025 am 12:09 AM

Csssmostlycase-unempfindlich, buturlsandfontfamilynamesarecase-sensitiv.1) Eigenschaften und ValueslikeColor: rot; sensitiv.2) URLSMUTMATTHESERVER'SCASE, z.

Was ist Autoprefixer und wie funktioniert es? Was ist Autoprefixer und wie funktioniert es? Jul 02, 2025 am 01:15 AM

AutoPrefixer ist ein Tool, das die Pr?fixe von Anbietern automatisch zu CSS -Attributen basierend auf dem Zielbrowserbereich hinzufügt. 1. Es l?st das Problem, die Pr?fixe mit Fehlern manuell aufrechtzuerhalten. 2. Arbeiten Sie das POSTCSS-Plug-in-Formular durch, analysieren Sie CSS, analysieren Sie Attribute, die vorangestellt werden müssen, und generieren Sie den Code gem?? Konfiguration. 3.. 4. Notizen enthalten nicht manuelles Hinzufügen von Pr?fixen, Konfigurationsaktualisierungen, Pr?fixe nicht alle Attribute, und es wird empfohlen, sie mit dem Pr?prozessor zu verwenden.

Was sind CSS -Z?hler? Was sind CSS -Z?hler? Jun 19, 2025 am 12:34 AM

CSSCOUNTERSCANATOMATIONSNUMBERSEctions und.1) usecounter-resettoinitialize, counter-IncrementtoIncrease, und Counter () orcounters () todisplayValues.2) kombinierte withjavascriptfordynamiccontentToEsSureAccurateupdates.

CSS: Wann ist der Fall wichtig (und wann nicht)? CSS: Wann ist der Fall wichtig (und wann nicht)? Jun 19, 2025 am 12:27 AM

In CSS sind Selektor- und Attributnamen fallempfindlich, w?hrend Werte, Namen, URLs und benutzerdefinierte Attribute fallempfindlich sind. 1. Die Auswahl- und Attributnamen sind unempfindlich, z. B. Hintergrundfarbe und Hintergrundfarbe sind gleich. 2. Die hexadezimale Farbe im Wert ist fallempfindlich, aber die benannte Farbe ist fallempfindlich, wie rot und rot ist ungültig. 3. Die URLs sind fallsempfindlich und k?nnen zu Ladeproblemen von Dateien führen. 4. Benutzerdefinierte Eigenschaften (Variablen) sind fallempfindlich und Sie müssen auf die Konsistenz des Falles bei der Verwendung achten.

Was ist die Funktion conicgradient ()? Was ist die Funktion conicgradient ()? Jul 01, 2025 am 01:16 AM

Theconic-Gradient () FunctionincsScreateScircular GradecentStroTRotateColorStopsaroundAcentralPoint.1.ISISIDEALFORPieCharts, Fortschrittsindikatoren, Farbw?sche und DecorativeBackgrounds.2

See all articles