In den späten 90ern interessierte ich mich für Webdesign und -entwicklung. Verdammt, wie lange ist es her? Und wie schrecklich es war. Ich meine, eine Website zu erstellen und zu veröffentlichen war ein heikles Geschäft, und Kunden konnten an den Fingern gezählt werden.

Es schien mir, dass sich die meisten Entwickler an diese Tage oder zumindest an das nächste Jahrzehnt erinnern, aber nein. Kürzlich bin ich auf einen Tweet gestoßen , dessen Autor von der Technik überrascht war, abgerundete Ecken vor dem Erscheinen einzurichten border-radius(für jede abgerundete Ecke ein separates Bild erstellen und genau positionieren). Ich erinnere mich noch daran, wie wir mit angehaltenem Atem gewartet haben, als es border-radiuszum Standard wurde und das Präfix in Browsern entfernt wurde.

Auf der anderen Seite haben viele das Webdesign früher nur wenig ausprobiert und glauben, dass sich seitdem nichts geändert hat.

Dieser Artikel ist für alle. Die Geschichte von CSS und Webdesign, wie ich mich erinnere.

(Bitte beachten Sie, dass Erinnerungen und Recherchen in diesem Artikel eng miteinander verknüpft sind. Daher kann ich nicht garantieren, dass wirklich alles richtig dargestellt ist, insbesondere in Bezug auf Ursache-Wirkungs-Beziehungen. Sie können den offiziellen CSS-Verlauf von W3C lesen , der viel kürzer und besser übereinstimmt Realität und enthält deutlich weniger Flüche).

(Außerdem würde der Artikel stark von mehr Illustrationen profitieren, aber das Schreiben des Textes hat mich zu viel Zeit gekostet).

Erste Tage

Am Anfang gab es kein CSS.

Es war sehr schlecht.

Mein Lieblingsartefakt dieser Zeit ist O'Reillys Buch, in dem ich HTML: The Definitive Guide studiert habe . Mehrere Ausgaben dieses Handbuchs wurden Mitte und Ende der 90er Jahre veröffentlicht. Das Buch spricht wirklich nur über HTML, ohne CSS überhaupt zu erwähnen. Ich habe es nicht mehr und kann keine Scans im Internet finden, aber es gibt eine Seite aus der neueren Ausgabe dieses Buches HTML & XHTML: The Definitive Guide (wir werden später über XHTML sprechen). Hier sind Tipps für das neueste Webdesign der 90er Jahre:

„Markieren Sie die Kopf- und Fußzeile deutlich mit horizontalen Linien.“

Nein, das ist es nichtborder-top. Das<hr>. Der Seitentitel ist mit ziemlicher Sicherheit zentriert mit<center>.

Die Seite hat einen Standardhintergrund, eine Standardschriftart und eine Standardtextfarbe. Zum Teil, weil in diesem Handbuch zunächst die ersten Konzepte vorgestellt werden. teils weil es ein Schwarz-Weiß-Buch ist, teils weil es die Realität widerspiegelt - etwas auf einer Seite zu färben war eine riesige Hämorrhoide.

Nehmen wir an, Sie möchten alle Überschriften rot machen. Fügen Sie dazu die folgenden Tags ein:

<H1><FONT COLOR=red>...</FONT></H1>

... für jede Überschrift . Ich hoffe, Sie entscheiden sich nie für Blau!

Oh, und HTML-Tags wurden benutzerdefiniert in Großbuchstaben geschrieben. Ich kann mich nicht erinnern, warum wir alle entschieden haben, dass es eine gute Idee war. Möglicherweise war dies vor dem Erscheinen der Syntaxhervorhebung in Texteditoren (ich war 12 Jahre alt und habe Notepad verwendet), und die Überschriften-Tags sind leichter vom Haupttext zu unterscheiden.

Daher war die Pflege der Website ein wahrer Albtraum. Viele entschieden, dass es einfacher sei, kein Design zu verwenden, sondern nur die Standardeinstellungen. In gewisser Hinsicht war es sogar schön: Mit Browsern können Sie diese Standardwerte ändern, sodass Sie den Text im Internet in der gewünschten Form lesen können.

Ich erinnere mich, wie auf vielen Geocities-Websites eine interessante alternative Lösung erschien: ein völlig neues Aussehen für jede neue Webseite. Verdammt, richtig? Mach einfach auf jeder neuen Seite, was du willst.

Vielleicht war dies der Höhepunkt des Webdesigns.

Verdammt, ich vermisse diese Tage. Vollständig offenes Web, kein Twitter, kein Facebook. Wenn Sie etwas zu sagen haben, sollten Sie Ihre eigene Website erstellen. Das war großartig. Niemand wusste, was er tat; Ich wette, dass die überwiegende Mehrheit der Webdesigner zu dieser Zeit ignorante Amateur-Teenager (wie ich) waren, die Seiten von anderen ignoranten Amateur-Teenagern kopierten. Die Hälfte des Internets bestand aus von Fans erstellten Portalen über Animorphs mit unerklärlichen Warnbildschirmen, dass die Website mit einer Bildschirmauflösung von 640 x 480 am besten funktioniert (vermutlich sollte jeder 12-jährige Teenager mit unzureichender Bildschirmauflösung einen neuen Monitor kaufen). Alle coolen Typen verwenden Internet Explorer 3 - den fortschrittlichsten Browser. Einige Verlierer sitzen jedoch immer noch in Netscape Navigator, sodass Sie auf der Hauptseite das animierte GIF "Best in IE" platzieren müssen.

Es war auch die Ära der „Internet-sicheren Farben“ - eine Palette von 216 Farben, in der jeder Kanal gleich war00, 33, 66, 99, ccOder ff, weil einige noch blieb mit 256 Farbmonitor! Heute denken wir nicht darüber nach, da 24-Bit-Farben selbstverständlich sind.

Tatsächlich war vieles, was wir heute für selbstverständlich halten, damals unverständlich und schwierig. Möchten Sie auf jeder Seite der Website dieselbe Navigation? Okay, kein Problem: Kopieren Sie den Navigationscode auf jeder Seite. Wenn Sie diesen Code aktualisieren, müssen Sie jede Seite aktualisieren. Wahrscheinlich werden Sie dies jedoch auf einigen Seiten vergessen, und die Site sieht aus wie eine archäologische Site mit mehreren Seitenebenen aus verschiedenen „Epochen“.

Es ist viel einfacher, Frames zu verwenden .Wenn das Browserfenster in ein Raster unterteilt ist und in jede Zelle eine separate Seite geladen wird, werden die Benutzer verwirrt, wenn sie zu einer separaten Seite ohne Frames gelangen, wie dies häufig bei Suchmaschinen wie AltaVista der Fall ist (das kann ich nicht glauben) Ich erkläre Frames, aber seit 2001 hat sie niemand mehr verwendet ... wissen Sie, was Iframes sind? Hier bedeutet der Buchstabe "i" Inline , dh integrierte Frames, um sie von regulären Frames auf dem gesamten Bildschirm zu unterscheiden .

PHP hat diesen Namen noch nicht einmal bekommen und niemand hat davon gehört. Diese seltsame Mischung aus Perl und CGI war wirklich schwer zu verstehen, und sie funktionierte nicht auf Ihrem eigenen Computer, Fehler waren schwer zu finden und zu diagnostizieren, und Geocities unterstützte sie sowieso nicht. Wenn Sie wirklich ein glücklicher und fortgeschrittener Entwickler sind, hat Ihr Host auf dem Apache-Webserver gearbeitet. Anschließend können Sie die integrierte dynamische Assemblersprache Server Side Includes verwenden und Folgendes schreiben:

<BODY>
    <TABLE WIDTH=100% BORDER=0 CELLSPACING=8 CELLPADDING=0>
        <TR>
            <TD COLSPAN=2>
                <!--#include virtual="/header.html" --> 
            </TD>
        </TR>
        <TR>
            <TD WIDTH=20%>
                <!--#include virtual="/navigation.html" --> 
            </TD>
            <TD>
                (actual page content goes here)
            </TD>
        </TR>
    </TABLE>
</BODY>

Das ist gut. Apache sieht spezielle Kommentare und fügt den Inhalt der Dateien ein, auf die verwiesen wird. Der Nachteil ist, dass Sie auf Ihrem Computer nichts überprüfen konnten und die gesamte Navigation fehlte, da Ihr Webbrowser diese Anweisungen hier als normale HTML-Kommentare interpretierte. Natürlich war die Installation von Apache zu Hause nicht möglich, da Sie einen Computer und keinen Server haben .

Leider sind alle alten Stätten längst verschwunden und in der Asche der Geschichte verborgen, in der alles, was diese Woche noch nicht getan wurde, bereits veraltet und längst vergessen ist. Das Web sollte Informationen ewig machen, aber stattdessen wurde ein Großteil davon vergänglich. Ich vermisse jene Zeiten, in denen fast alle meine Freunde ihre eigenen Websites hatten. Ihr Twitter und Instagram als Online-Präsenz ist ein schlechter Ersatz.

... Schauen wir uns also die Space Jam-Website an.

Beispiel: Space Jam

Wenn Sie es nicht wissen, ist Space Jam der größte Film aller Zeiten. Er spricht über die extrem kurzlebige Basketballkarriere des Kaninchens Bugs Bunny, der zusammen mit dem lebenden Michael Jordan den Planeten vor einer Bedrohung durch Außerirdische rettet. Dann kam eine Reihe sehr erfolgreicher und äußerst lustiger Fortsetzungen zu diesem Film.

Und wir sind wirklich sehr glücklich, dass die Space Jam-Website 24 Jahre nach ihrem Start immer noch funktioniert ! Genau hier und jetzt haben wir die Möglichkeit, die beste Webdesign-Leistung des Modells von 1996 zu untersuchen.

Beachten Sie zunächst, dass jede Seite der Site statisch ist. Und dies ist eine statische Seite mit einer Erweiterung .htm, nicht.htmldenn vor Windows 95 waren wir noch an 8.3-Dateinamen gebunden (acht Zeichen für den Namen, drei Zeichen für die Erweiterung). Ich weiß nicht, warum dies in der URL von Bedeutung ist, da niemand Windows 3.11 auf einem Webserver ausführte, aber okay.

Hier ist das CSS für die Hauptseite:

<body bgcolor="#000000" background="img/bg_stars.gif" text="#ff0000" link="#ff4c4c" vlink="#ff4c4c" alink="#ff4c4c">

Haha, ich mache nur Spaß! Was zum Teufel für CSS? "Cosmic Jam" wurde einen Monat früher veröffentlicht als dieser Standard veröffentlicht wurde (tatsächlich gibt es eine Zeile im Quellcode der Seite, aber ich bin sicher, dass sie viel später hinzugefügt wurde, um einige Links zu den Regeln zu stilisieren, die eingefügt werden mussten, weil gesetzliche Verpflichtungen).

Achten Sie bei der Navigation auf die äußerst genaue Position der Hyperlinks. Dieses Kunststück wurde auf die gleiche Weise vollbracht wie 1996: mit Tabellen.

Tatsächlich haben Tabellen einen funktionalen Vorteil gegenüber CSS im Layout, was damals sehr wichtig war, da Sie bei gedrückter Strg-Taste eine Zelle auswählen konntenTische oder sogar ein paar. Ein solcher eigenartiger „Retro-Debugger“ zeigt, wie sich die Zellen im Layout befinden. Es war großartig, weil der erste normale Firebug- Debugger erst 2006 herauskam - ein ganzes Jahrzehnt später!

Das Markup dieser Tabelle ist aus einem unbekannten Grund mit Leerzeilen gefüllt. Wenn Sie sie jedoch löschen, sieht es folgendermaßen aus:

<table width=500 border=0>
<TR>
<TD colspan=5 align=right valign=top>
</td></tr>
<tr>
<td colspan=2 align=right valign=middle>
<br>
<br>
<br>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0></a>
</td>
<td align=center valign=middle>
<a href="cmp/jamcentral/jamcentralframes.html"><img src="img/p-jamcentral.gif" height=67 width=55 alt="Jam Central" border=0></a>
</td>
<td align=center valign=top>
<a href="cmp/bball/bballframes.html"><img src="img/p-bball.gif" height=62 width=62 alt="Planet B-Ball" border=0></a>
</td>
<td align=center valign=bottom>
<br>
<br>
<a href="cmp/tunes/tunesframes.html"><img src="img/p-lunartunes.gif" height=77 width=95 alt="Lunar Tunes" border=0></a>
</td>
</tr>
<tr>
<td align=middle valign=top>
<br>
<br>
<a href="cmp/lineup/lineupframes.html"><img src="img/p-lineup.gif" height=52 width=63 alt="The Lineup" border=0></a>
</td>
<td colspan=3 rowspan=2 align=right valign=middle>
<img src="img/p-jamlogo.gif" height=165 width=272 alt="Space Jam" border=0>
</td>
<td align=right valign=bottom>
<a href="cmp/jump/jumpframes.html"><img src="img/p-jump.gif" height=52 width=58 alt="Jump Station" border=0></a>
</td>
</tr>
...
</table>

Dies sind die ersten beiden Zeilen, einschließlich des Logos. Du hast die Idee. Alles ist in den Zellen mit alignund positioniert valign; oft angewendet rowspanund colspanes gibt wenig <br>, um die vertikale Positionierung auf einer Linie anzupassen, wo nötig.

Weitere fantastische Artefakte finden Sie auf der Seite, einschließlich eines Headers, der die Apache SSI-Syntax enthält! Es muss für alle leise kaputt gegangen sein, als die Site für viele Jahre ihres Lebens auf Hosting umgestellt wurde. Jetzt wird es auf Amazon S3 gehostet. Na kennst du Amazon? Bücherladen?

<table border=0 cellpadding=0 cellspacing=0 width=488 height=60>
<tr>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234&page.allowcompete=no"--></td>
<td align="center" width="20"></td>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234"--></td>
</tr>
</table>

Okay, schauen Sie sich die Jam Central- Seite an . Aus Gründen der Authentizität habe ich die Auflösung im Browser auf 640 × 480 reduziert (obwohl ich für ein vollständiges Eintauchen etwas mehr vertikalen Platz für die Titelleiste, die Taskleiste und fünf bis sechs IE-Symbolleisten hätte reservieren sollen).

Achten Sie auf die Rahmen: Das Logo in der oberen linken Ecke führt zurück zur Zielseite und speichert korrekt einen Platz auf dem Bildschirm, um die gesamte Navigation nicht zu wiederholen. In der oberen rechten Ecke befindet sich ein verdammtes Werbebanner, das auf sieben verschiedene Arten blockiert wurde. Alle drei Teile sind separate Seiten.

Beachten Sie auch den völlig unlesbaren roten Text auf einem strukturierten Hintergrund, eines der sichersten Zeichen des Webdesigns der 90er Jahre. Sie fragen sich vielleicht, warum nicht einen normalen Hintergrund für Text verwenden? Du bist ein Idiot. Wie kann man das machen? Immerhin ist das Attribut backgroundnur mit <body>! Sie können eine Tabelle aufstellen, aber die Tabellen unterstützen nur einen soliden Hintergrund, es wird langweilig aussehen!

Aber warte, was ist dieses neue Navigations-Widget? Wie haben Sie es geschafft, alle Links aufzuhängen? Noch ein Tisch? Nun, nein, obwohl Designer oft den Tisch mit Stücken eines geschnittenen Bildes füllten. Aber hier haben wir Imagemap , eine längst vergessene HTML-Funktion. Zeigen Sie einfach die Quelle:

<img src="img/m-central.jpg" height=301 width=438 border=0 alt="navigation map" usemap="#map"><br>

<map name="map">
<area shape="rect" coords="33,92,178,136" href="prodnotesframes.html" target="_top">
<area shape="rect" coords="244,111,416,152" href="photosframes.html" target="_top">
<area shape="rect" coords="104,138,229,181" href="filmmakersframes.html" target="_top">
<area shape="rect" coords="230,155,334,197" href="trailerframes.html" target="_top">
</map>

Ich denke hier ist alles mehr oder weniger klar. Das Attribut usemapfügt eine Imagemap hinzu, die als eine Reihe von anklickbaren Bereichen definiert ist, die durch einige Koordinaten wunderschön codiert sind.

Und es funktioniert immer noch! In HTML! Sie können es jetzt verwenden! Obwohl wahrscheinlich nicht.

Vorschaubild

Betrachten Sie eine andere zufällige Seite. Zum Beispiel "Foto aus dem Film". (Warten Sie, Foto ? Damals kannten Sie die Wörter "Frame" und "Screenshot" nicht? Nun, okay ...)

Ein weiterer Satz von Frames, aber anders angeordnet.

<body bgcolor="#7714bf" background="img/bg-jamcentral.gif" text="#ffffff" link="#edb2fc" vlink="#edb2fc" alink="#edb2fc">

Hier haben die Entwickler eine wichtige Sache getan: Sie haben nicht nur das Hintergrundbild (undurchsichtig), sondern auch die Hintergrundfarbe angegeben. Andernfalls würde weißer Text auf einem weißen Hintergrund ausgegeben, wenn das Hintergrundbild nicht geladen würde.

(Ein weiterer interessanter Unterschied zur modernen Entwicklung. Heutzutage gehen viele Designer davon aus, dass alle Ressourcen heruntergeladen werden, und manchmal stellen sie den Download als eine Unannehmlichkeit dar, die umgangen werden muss. Sie sitzen jedoch immer noch nicht auf der Glasfaserverbindung von San Francisco, zehn Meter vom Hauptnetz entfernt Kanal).

Aber zurück zur Seite. Thumbnail-Raster waren zu dieser Zeit ein klassisches Webdesign-Problem. Das Hauptproblem ist, dass Sie Bilder nebeneinander platzieren möchtenund HTML stapelt sie standardmäßig in einer großen Spalte. Zu dieser Zeit hatte der Designer nur ein Werkzeug: einen Tisch. Auf unserer Website ist es wie folgt strukturiert:

<table cellpadding=10>
<tr><td align=center><a href="..."><img src="..."></a></td>...</tr>
<tr>...</tr>
<tr>...</tr>
<table>

Ein 3 × 3-Miniaturbildraster, das nach Ermessen des Browsers formatiert wird (das letzte Bild in einer separaten Zeile ist nicht wirklich Teil der Tabelle). Die Anzahl der Spalten hängt nicht von der Breite des Bildschirms ab, aber in jenen Tagen hatten alle winzige Bildschirme, so dass dies den Designer nicht allzu sehr störte. Hier haben die Bilder keine Beschriftungen, aber da jede von ihnen in einer separaten Zelle platziert ist, können sie einfach hinzugefügt werden.

Dies war 1996 der fortschrittlichste Ansatz zur Anzeige von Miniaturansichten. Wir werden noch einige Male auf dieses kleine UI-Puzzle zurückkommen. Sie können echte Beispiele (und Quellcode mit Beispiel-Markup) auf einer separaten Seite sehen .

Werfen wir aus Gründen des Interesses einen Blick auf die Größe der Bilder in voller Größe, Farbe und Internetqualität aus dem Film.

Hey, ja, sie sind weniger als 16 KB! Dieses Bild wird schneller als in neun Sekunden geladen!

(Ich erinnere mich an das Problem mit dem eingebetteten Video, es konnte nicht gelöst werden, bis das HTML5-Tag <video>einige Jahre später erschien. Bis dahin musste ich ein proprietäres Plug-In verwenden, und sie waren alle schrecklich).

(Ja, übrigens: Den Bildern in den Links wurde standardmäßig ein Farbrahmen hinzugefügt. Hier ist das Vorhandensein des Links offensichtlich, sodass der Frame redundant und nervig aussieht. Vor CSS sollten sie für jedes einzelne Bild mithilfe des Attributs deaktiviert werden. <img border=0>)

Das übliche Layout dieser Zeiten

Dort haben wir angefangen und es war scheiße. Wenn Sie einen gemeinsamen Stil auf mehr als ein paar Seiten haben wollten, waren Ihre Möglichkeiten sehr begrenzt, und das Kopieren und Einfügen blieb das einzige Werkzeug. Die Space Jam-Website hat sich - wie so viele andere auch - keine Gedanken über die Konsistenz des Designs gemacht.

Dann kam CSS. Es war ein echtes Wunder . Alle diese Code-Wiederholungen auf jeder Seite sind verschwunden. Möchten Sie alle Top-Level-Überschriften einer bestimmten Farbe erstellen? Kein Problem:

H1 {
    color: #FF0000;
}

Bam! Und das ist alles. Egal wie viele Überschriften sich <h1>in Ihrem Dokument befinden, jede von ihnen wird rot und Sie müssen nie wieder darüber nachdenken. Noch besser: Sie können dieses Fragment in Ihre eigene Datei einfügen und diese zweifelhafte ästhetische Wahl fast mühelos auf jede Seite Ihrer Website anwenden ! Gleiches gilt für Ihren prächtigen Kachelhintergrund, die Linkfarbe und die Schriftgröße in Tabellen.

(Denken Sie daran, den Inhalt der Tags <style>in HTML-Kommentare zu verpacken , da ältere Browser ohne CSS-Unterstützung sie sonst als Text anzeigen.)

Es ist nicht erforderlich, Tags auf alle Elemente in einer Reihe anzuwenden. CSS führte die Konzepte „Klassen“ und „ID“ ein, sodass sich der Stil nur auf speziell gekennzeichnete Elemente erstreckt. Typ - SelektorP.importantgilt nur für Absätze der Klasse <P CLASS="important">, #headerwirkt sich jedoch nur auf diese aus <H1 ID="header">(der Unterschied besteht darin, dass Bezeichner im Dokument eindeutig sein müssen und Klassen beliebig oft verwendet werden können). Mit diesen Tools erstellen Sie effektiv Ihre eigenen Tags und erhalten eine individuelle HTML-Version, die für Ihre Website einzigartig ist!

Es war ein großer Sprung nach vorne, aber zu diesem Zeitpunkt dachte (wahrscheinlich) niemand darüber nach, CSS für das Layout zu verwenden. Als die CSS 1- Empfehlung im Dezember 96 veröffentlicht wurde , hat sie das Layout kaum berührt, sondern nur vorhandene HTML-Funktionen von Tags getrennt, an die sie angehängt sind. Wir hatten Schriftfarben und Hintergrund dank <FONT COLOR>und<BODY BACKGROUND>. Das einzige, was sich zumindest aus der Ferne auf die Position von Objekten auf der Seite auswirkte, war die floatentsprechende Eigenschaft <IMG ALIGN>, die das Bild zur Seite zog und den Textfluss wie in einer Zeitung beinhaltete. Nicht so beeindruckend.

Das ist aber nicht überraschend. Es gab keine echten Layout-Tools in HTML außer Tabellen, und Tabelleneigenschaften sind zu schwierig, um sie in CSS zu verallgemeinern oder sich auf die Tag-Struktur zu beziehen. Daher gab es nichts, was CSS 1 hinzugefügt werden konnte. Wir haben nur ein wenig automatisiert, zum Beispiel die Verwendung von Tags <FONT>, also Webdesign wurde weniger langweilig und weniger fehleranfällig, der Seitencode wurde sauberer und viel einfacher zu warten. Ein ziemlich guter Schritt nach vorne, und alle haben ihn gerne angenommen, aber die Tabellen blieben das Hauptwerkzeug für das Layout.

Das war jedoch normal. Im Großen und Ganzen benötigt Ihr Blog nur eine Überschrift und eine Seitenleiste. Tabellen eignen sich gut dafür, und diese Grundstruktur ist für die meisten Situationen geeignet. Es ist nicht so schwierig, ein paar Zeilen <TABLE BORDER=0>und zu kopieren / einzufügen <TD WIDTH=20%>.

Für mehrere Jahre war dies der Standard. Tabellen für Layout, CSS für ... nun, für Stil. Farben, Größen, fett, unterstrichen. Es gab sogar einen so dummen Trick, wenn ein Link nur dann hervorgehoben wurde, wenn sich der Mauszeiger darüber befand. Die Schönheit!

(Unterhaltsame Tatsache: HTML-Code für die meisten E-Mail-Dienste stammt noch nicht aus dieser Zeit).

(Und dann kam ich im reifen Alter von 11 Jahren in die Branche, ohne eine Ahnung zu haben, was ich tat, und studierte im Grunde genommen bei anderen 11-Jährigen, die ebenfalls keine Ahnung hatten, was sie taten. Ein großes Stück des Netzwerks wurde von 11-Jährigen erstellt Kinder, die ihre eigenen Websites erstellen, und das war großartig. Warum auf eine kommerzielle Website gehen, wenn Sie ein ganz bestimmtes Hobby eines Mannes oder Mädchens von der anderen Seite des Planeten kennenlernen können?)

Dunkle Zeiten

Eineinhalb Jahre später, Mitte 1998, wurde uns CSS 2 vorgestellt (ich liebe übrigens den Hintergrund auf dieser Seite). Dies war eine bescheidene Aktualisierung, die einige Mängel in verschiedenen Bereichen beseitigte. Am interessantesten war jedoch das Hinzufügen eines Paares von Positionierungsprimitiven: Mit der Eigenschaft positionkonnten Sie das Element in exakten Koordinaten platzieren, und im Anzeigemodus inline-blockkonnten Sie Blöcke nacheinander anordnen.

Solch eine verlockende Frucht, aber unzugänglich! Die Verwendung positionschien normal zu sein, aber die genaue Positionierung in Pixel widersprach ernsthaft dem flexiblen HTML-Design, und als die Größe des Bildschirms geändert wurde, fiel alles notwendigerweise auseinander oder es traten andere schwerwiegende Fehler auf. Das schien bescheideninline-block ziemlich interessant; Trotzdem löste er das Hauptproblem des HTML-Layouts, das darin bestand, Objekte in einer Reihe zu platzieren. Zunächst implementierte jedoch kein Browser diese Eigenschaft, sodass die Designer sie ignorierten.

Ich kann nicht sicher sagen, aus welchem Grund - möglicherweise aufgrund des Auftretens der Positionierung oder unter dem Einfluss eines anderen Faktors, aber zu dieser Zeit beschlossen Enthusiasten, das Layout mithilfe von CSS zu erstellen. Im Idealfall können Sie den Inhalt Ihrer Seite vollständig vom Erscheinungsbild trennen. Es gab sogar eine CSS Zen Garden- Website (er lebt noch), die diese Idee auf das Äußerste brachte. Darauf wird derselbe HTML-Code nach dem Anwenden verschiedener Stylesheets in völlig unterschiedliche Projekte konvertiert.

Das Problem war, dass die frühe CSS-Unterstützung verdammt fehlerhaft war. Rückblickend vermute ich, dass Browser-Entwickler die Verarbeitung von HTML-Tags einfach dupliziert haben und dies letztendlich erreicht haben. Die RichInStyle-Website enthält immer noch eine umfangreiche Liste von CSS-Fehlern in Browsern dieser Jahre. Hier sind einige meiner Favoriten:

IE 3 ignoriert alle <style> -Tags im Dokument mit Ausnahme des letzten.
IE 3 ignoriert Pseudoklassen und a:hoverliest sich wie folgt .
IE 3 und IE 4 behandeln Rahmen autoals null. Tatsächlich bestand dieser Fehler fast bis zur Version IE 6. Dies war jedoch normal, da IE 6 auch text-align: centerfür Blockelemente falsch verwendet wurde.
Wenn Sie eine absolute URL für das Hintergrundbild angeben, versucht IE 3, das Bild im lokalen Programm so zu öffnen, als hätten Sie es heruntergeladen.
Netscape 4 , #id, h1#id .
Netscape 4 — ! — .
Netscape 4 <li> , .
float clear ( ), Netscape 4 Mac .

Damit mussten wir arbeiten. Und wollten die Leute ein ganzes Seitenlayout in CSS erstellen? Ha.

Die Popularität dieser Idee nahm jedoch zu. Es wurde sogar zu einer Art einheitlichem Slogan für den fortgeschrittenen Teil der Designerelite - die beste Praxis, die als das einzig wahre Argument in der Debatte angeführt wurde. Die Verwendung von Tabellen für das Layout sei schlecht, sagten sie. Tabellen verwirren Screenreader (Screenreader), sie sind semantisch falsch, interagieren schlecht mit der CSS-Positionierung! All dies ist wahr, aber es war sehr schwer zu akzeptieren.

Nun, zurück in einer Minute. Lassen Sie uns zunächst einen Blick auf die Atmosphäre werfen, in der sich die Webentwicklung im Bereich 2000 entwickelt hat.

Das Ende der Browserkriege und die anschließende Stagnation

Die Kurzversion lautet wie folgt: Netscape verdiente Geld mit dem Verkauf des Navigator-Browsers (für Unternehmen bezahlt, kostenlos für den persönlichen Gebrauch), und dann kam Microsoft mit dem völlig kostenlosen Internet Explorer auf den Markt, und Microsoft hatte die Kühnheit, den Internet Explorer mit Windows zu verbinden. Kannst Du Dir vorstellen? Betrieb mit einem Browser ? Das war eine große Sache. Microsoft hat geklagt , sie hat verloren, aber infolgedessen hat sich fast nichts geändert.

Microsoft hat sowieso getan, was es wollte, und es hat funktioniert. Sie hat Netscape praktisch zerstört. Beide Browser waren höllisch fehlerhaft, aber auf unterschiedliche Weise fehlerhaft. Daher fällt eine in einem Browser getestete Site mit ziemlicher Sicherheit in einem anderen auseinander. Dies bedeutete, dass Webdesigner bei einem Rückgang des Marktanteils von Netscape weniger darauf achteten, so dass weniger Websites normal geöffnet wurden, wodurch der Anteil von Netscape Navigator noch weiter sank.

Wahrscheinlich keine sehr guten Nachrichten für Benutzer anderer Betriebssysteme als Windows. Das ist lustig, weil es IE 5.5 für Mac war und im Allgemeinen weniger fehlerhaft als IE 6 (übrigens war Bill Gates zu dieser Zeit weniger ein brillanter Geek als vielmehr ein aggressiver und rücksichtsloser Geschäftsmann, der ein Vermögen gemacht hat absichtlich jeden Wettbewerb zerstören, der im Weg steht, was letztendlich der gesamten Branche Schaden zufügte (dies ist übrigens so).

Als Windows XP mit Internet Explorer 6 Mitte 2001 herauskam, verwandelte sich Netscape Navigator von einem riesigen Juggernaut in einen winzigen Zwerg für Nischenanwendungen.

Und dann, nachdem Microsoft den Markt vollständig und vollständig erobert hatte, hörte es auf. Seit seiner Einführung wurde Internet Explorer jedes Jahr oder so veröffentlicht, aber nach IE 6 gab es eine Verzögerung von mehr als fünf Jahren. Es blieb immer noch fehlerhaft, aber in Abwesenheit von Konkurrenten war es nicht offensichtlich. Somit sah Windows XP auch gut genug aus , um den Desktop-Markt zu erobern, und die nächste Version von Windows kam nicht ungefähr zur gleichen Zeit heraus.

Außerdem wurde die Arbeit des W3C-Konsortiums eingestellt, das Standards akzeptiert (nicht zu verwechseln mit W3Schools, SEO-Blutegeln). Mitte der 90er Jahre wurde HTML mehrmals überarbeitet und dann als HTML 4 eingefroren. CSS wurde in nur anderthalb Jahren von der ersten auf die zweite Version aktualisiert, aber es fror auch ein. Kleinere CSS 2.1- Aktualisierungwird erst Anfang 2004 den Status einer „Kandidatenempfehlung“ erreichen, und es dauerte weitere sieben Jahre, bis die endgültige Fassung angenommen wurde.

In dieser Situation der vollständigen Dominanz von IE 6 schien das gesamte Netzwerk in der Zeit eingefroren zu sein. Standards spielten keine Rolle, da es tatsächlich nur einen Browser gab. Alles, was er tat, wurde de facto zum Standard. Als das Internet immer beliebter wurde, machte es der Strangulationsgriff des IE auch schwierig, eine andere Plattform als Windows zu verwenden, da der IE nur für Windows verfügbar war. Es konnte nie garantiert werden, dass die Website in einem anderen Browser funktioniert.

(Es gibt eine Idee, dass Monopole schlecht sind. Es muss eine Art Gesetz gegen sie geben!)

Gleichzeitig hat Netscape seine Position verschlechtert, nachdem eine umfassende Änderung des Motors begonnen wurde. Infolgedessen wurde ein viel konsistenterer Netscape 6-Standard veröffentlicht, und der Preis war mehrere Jahre lang nicht auf dem Markt, wo IE zu diesem Zeitpunkt seinen Anteil weiter erhöhte. Der Netscape 6-Browser erreicht nicht einmal 10%, während der IE einen Spitzenwert von 96% erreicht. Andererseits wurde die neue Engine als Teil der Mozilla Application Suite mit Open Source herausgebracht, die später eine Rolle spielen wird.

Aber vorher gab es noch ein paar Jahre, aber vorerst ...

Kompatibilitätsmodus

Alle frühen CSS-Implementierungen in Browsern waren voller Fehler. Der vielleicht berüchtigtste von ihnen ist ein Fehler mit dem Containermodell (Box-Modell).

Sie sehen, ein Container (der rechteckige Raum, den ein Element einnimmt) hat mehrere Dimensionen: seine eigene Breite und Höhe, dann das Auffüllen, dann einen optionalen Rand und dann das Feld, das ihn von benachbarten Containern trennt. CSS zeigt an, dass alle diese Abstände zusammen gestapelt sind. Zum Beispiel ein Container mit den folgenden Stilen:

    width: 100px;
    padding: 10px;
    border: 2px solid black;

... wird von Rand zu Rand 124 Pixel breit sein.

IE 4 und Netscape 4 verfolgten jedoch einen anderen Ansatz: Sie betrachteten Breite und Höhe als eine Dimension von Rand zu Rand, von der Ränder und Ränder abgezogen werden , um die Breite des Elements selbst zu erhalten. Das gleiche Feld in diesen Browsern hat von Rand zu Rand eine Breite von 100 Pixel, und für den Inhalt verbleiben 76 Pixel.

IE 6 hat beschlossen, diesen Widerspruch mit der Spezifikation zu korrigieren. Leider würde nur das Vornehmen von Änderungen das Design einer Reihe von Websites beeinträchtigen, die sowohl im IE als auch in Netscape einwandfrei funktionieren.

Daher hat das IE-Team einen sehr seltsamen Kompromiss gefunden: Sie haben das alte Verhalten (zusammen mit mehreren anderen schwerwiegenden Fehlern) als "Kompatibilitätsmodus" (Mackenmodus, wörtlich "Arbeiten mit Macken") deklariert und standardmäßig aktiviert . Um in den neuen "strengen" oder "Standardmodus" zu wechseln, musste am Anfang des Dokuments vor dem Tag "doctype" angegeben werden <html>. Es sah ungefähr so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Viele Jahre lang musste jeder diese dumme Zeile am Anfang jedes HTML-Dokuments einfügen (später würde HTML5 es vereinfachen <!DOCTYPE html>). Wenn Sie darüber nachdenken, ist dies eine wirklich seltsame Methode, um das richtige CSS-Verhalten auszuwählen. Die Doctype-Deklaration ist seit Mitte der 90er Jahre Teil der HTML-Spezifikation , wurde jedoch von niemandem verwendet. Ich denke, Microsoft hatte die Idee, die Auswahl zuzulassen, ohne proprietäre Erweiterungen einzuführen. Durch die Verwendung einer solchen Deklaration kann ein Verhalten vermieden werden, das anfangs falsch war. Bequemer Ausstieg für das IE-Team!

Das Lustige ist, dass der Kompatibilitätsmodus mit "Macken" immer noch existiert. Und es ist immer noch standardmäßig installiertin allen Browsern zwanzig Jahre später! Die genaue Liste der "Macken" hat sich im Laufe der Zeit geändert. Insbesondere verwenden weder Chrome noch Firefox das IE-Containermodell auch in diesem Modus, aber viele andere Fehler werden emuliert.

Moderne Browser haben auch einen "fast Standard" -Modus, der nur eine Eigenart emuliert. Vielleicht ist dies die zweitskandalöseste Funktion: Wenn eine Tabellenzelle nur ein Bild enthält, wird der darunter liegende Bereich gelöscht. Gemäß den üblichen CSS-Regeln befindet sich das Bild in der (leeren) Textzeile, die etwas Platz darunter benötigt - für interlineare Buchstabenelemente wie "y". Frühe Browser konnten dies normalerweise nicht verarbeiten. Einige Websites, die nach etwa 2000 erstellt wurden, vertrauten jedoch auf diese Funktion, obwohl alles andere vollständig kompatibel war. Zum Beispiel schneiden sie ein großes Bild in Stücke, die in den Zellen des Tisches nahe beieinander platziert wurden. Wenn Sie gemäß dem Standard Leerzeichen hinzufügen, fällt das Bild auseinander.

Aber zurück in die Vergangenheit. Obwohl sich die Standards formal durchsetzten, entstand ein neues Problem. Da IE 6 das Web dominierte und DOCTYPE-Deklarationen optional waren, war es nicht erforderlich, über die Unterstützung dieser Standards im "strengen Modus" des Browsers nachzudenken. Andere Browser emulierten es schließlich und benutzerdefiniertes Verhalten wurde zum De-facto-Standard. Webdesigner, die sich um solche Dinge kümmerten (zu unserer Ehre gab es viele von uns), starteten eine hochkarätige Kampagne, um den strengen Modus zu ermöglichen, da dies ein absolut notwendiger erster Schritt war, um die Kompatibilität mit anderen Browsern sicherzustellen.

XHTML Aufstieg und Fall

Inzwischen hat W3C das Interesse an HTML zugunsten von XHTML verloren. Dies ist ein Versuch, den HTML-Code mithilfe der XML-Syntax anstelle von SGML neu zu gestalten.

(Was ist SGML, fragen Sie? Ich weiß es nicht. Niemand weiß es. Dies ist die Grammatik, auf der HTML basiert, und dies ist das einzige, was darüber bekannt ist.)

Zu Gunsten des Konsortiums gab es zu diesem Zeitpunkt hinreichend gute Gründe für eine solche Entscheidung. In der Regel wurde HTML manuell geschrieben (wie es jetzt ist), und dies bedeutet das obligatorische Vorhandensein zufälliger Fehler. Browser lehnten den fehlerhaften HTML-Code nicht ab, sondern verwendeten verschiedene Methoden zur Fehlerbehebung - und wie bei allem anderen behandelten verschiedene Browser Fehler unterschiedlich. Das leicht verzerrte HTML schien in IE 6 gut zu funktionieren (wobei "gut funktioniert" bedeutet "hat getan, was Sie von ihm erwartet haben"), aber es fiel in anderen Browsern vollständig auseinander.

Das W3C-Konsortium entschied sich für XML, weil es XML Anfang der 2000er Jahre als universelle Lösung für alle Probleme ansah. Wenn Sie nicht wissen, geht XML bei der Fehlerbehandlung viel expliziter und aggressiver vor. Wenn Ihr Dokument einen Analysefehler enthält, ist das gesamte Dokument ungültig. Dies bedeutet, dass, wenn Sie XHTML ausgewählt und einen Tippfehler gemacht haben, überhaupt nichts im Browser angezeigt wird. Nur ein Fehler.

Es nervt. Auf den ersten Blick scheint alles normal zu sein, aber denken Sie daran: Universelles XML wird normalerweise dynamisch mithilfe von Bibliotheken zusammengestellt, die das Dokument als einen von Ihnen bearbeiteten Baum behandeln und am Ende in Text umwandeln. Dies ist ideal für die allgemeine Verwendung von XML zum Serialisieren von Daten, wenn Ihre Daten bereits ein Baum sind und der größte Teil der XML-Struktur einfach und wiederholbar ist, sodass sie leicht in Funktionen ausgeblendet werden können.

HTML ist nicht so. Ein HTML-Dokument hat wenig zuverlässige Wiederholungsstruktur. Auch dieser Artikel auf der Seite ist hauptsächlich mit Tags formatiert <p>, enthält aber auch unerwartete <em>und zufällige Inhalte im Haupttext<h3>zwischen Absätzen. Es macht keinen großen Spaß, dies in Form eines Baumes zu kodieren. Und das ist wichtig, denn ungefähr zur gleichen Zeit gewann das serverseitige Rendern an Dynamik und der generierte HTML-Code damals und heute! - Wird mit Vorlagen geliefert, die es als Textstrom betrachten.

Wenn HTML-Seiten rein statische Dokumente wären, könnte XHTML funktionieren - Sie schreiben ein Dokument, sehen es in einem Browser und wissen, dass alles funktioniert. Keine Probleme. Aber um ein Dokument dynamisch zu erstellen und das Risiko einzugehen, dass in einer Grenzsituation die gesamte Website betrogen wird und der Besucher nur einen Fehler im Browser sieht? Das ist scheiße.

Natürlich spielte auch die Verbreitung des neuen Unicode-Standards zu dieser Zeit eine Rolle. Dann war nicht immer klar, wie man es benutzt, und eine schlechte Sequenz von UTF-8 reichte aus, um das gesamte XML-Dokument als verzerrt und "ungültig" zu betrachten!

Nach einigem Verwöhnen haben wir XHTML fast vergessen. Er hinterließ nur zwei Spuren:

Alle haben aufgehört, Tag-Namen in Großbuchstaben zu verwenden! Tschüss <BODY>, hallo <body>! XML unterscheidet zwischen Groß- und Kleinschreibung und alle XHTML-Tags wurden in Kleinbuchstaben geschrieben, sodass die Titel-Tags einfach nicht funktionierten (lustige Tatsache: Die JavaScript-API übergibt die Namen der HTML-Tags immer noch in Großbuchstaben). Dies ist wahrscheinlich auf die wachsende Beliebtheit der Syntaxhervorhebung zurückzuführen. Wir schreiben nicht mehr wie 1997 im Editor.
. , HTML : , <p>...</p>, <br>. <br> , </br>. XML : , <br/>, <br></br>.

XHTML , - , <br/> HTML-. XML ; HTML5 , . , <script/> <script> — HTML !

Ich vermisse nur eine Sache in XHTML. Dort können Sie die XSLT-Metasprache verwenden, um die Vorlage „im Browser“ zu erstellen (dh den Inhalt der Seite in das allgemeine Layout der Site einzufügen), ohne Skripte zu schreiben. Es war der einzig mögliche Weg, dies zu tun, und es war verdammt cool, wenn alles funktionierte. Aber eine kleine Panne könnte alles ruinieren.

Das Erscheinungsbild des CSS-Layouts

Zurück zu CSS!

Sie sind ein Webdesigner für Anfänger und möchten aus irgendeinem Grund versuchen, CSS-Stile für das Layout zu verwenden, obwohl sie eindeutig nur für Farben und andere Dinge gedacht sind. Was zu tun ist?

Wie bereits erwähnt, ist das Hauptproblem die horizontale Position von Objekten nebeneinander . Die vertikale Positionierung ist kein Problem - dies ist normales HTML-Verhalten. Der einzige Grund, warum jeder Tabellen verwendet, besteht darin, dass er das Material in Zellen zerlegen und in Spalten nebeneinander anordnen kann.

In CSS 2 wurden einige Anzeigemodi eingeführt, die Teilen der Tabelle entsprechen. Um sie zu verwenden, benötigen Sie jedoch die gleichen drei Verschachtelungsebenen wie in realen Tabellen: die Tabelle selbst, dann die Zeile, dann die Zelle. Sie sind nicht hier und auf jeden Fall wird der IE solche Modi nicht bald unterstützen.

Es gibt noch mehr position, aber er versucht ständig , Gegenstände übereinander zu legen . Hmm

Was ist übrig?

In der Tat nur ein Werkzeug : float.

Ich sagte, floatdass Sie damit die Zeitung mit Text um das Bild fließen lassen können, aber dies ist eine sehr allgemeine Beschreibung. Im Prinzipkann auf jedes Element angewendet werden. Wenn Sie eine Seitenleiste benötigen, können Sie sie an den linken Rand lehnen, eine Breite von 20% der Seite zuweisen und Folgendes erhalten:

+ --------- +
| Seitenleiste | Hallo und herzlich willkommen auf meiner Website!
| |
+ --------- +

Leider sind die Eigenschaften floatso, dass der Text darum herum fließt. Wenn der Text auf der Seite länger als die Seitenleiste ist, wird er unten angezeigt - und die Illusion wird zerstört. Aber es kann umgangen werden. Die CSS-Spezifikationen verdeutlichen, dass Inhalte floatnicht umeinander fließen können. Es reicht also aus, nur noch einen zu platzieren float!

+ --------- + + ------------------------------- +
| Seitenleiste | | Hallo und herzlich willkommen auf meiner Website! |
| | | |
+ --------- + | Hier ist ein längerer Absatz zum Anzeigen von |
            | dass mein Galaxienhirn CSS schwebt |
            | Unsinn verhindert Textumbruch. |
            + ----------------------------------- +

Dieser Ansatz funktionierte, aber seine Einschränkungen waren viel schlimmer als die Tabellenbeschränkungen. Wenn Sie beispielsweise eine Fußzeile hinzufügen, wird diese rechts neben dem Haupttext angezeigt, da sich der „Cursor“ für den Browser immer noch oben rechts neben den Float-Blöcken befindet. Daher müssen Sie es verwenden clear, um ein Element unter alle Schwimmer zu nageln. Wenn Sie die Seitenleiste auf 20% der Seitenbreite und den Körper auf 80% eingestellt haben, wird die Seite durch einen beliebigen Abstand zwischen ihnen vom Bildschirm verschoben und eine hässliche horizontale Bildlaufleiste angezeigt. Sie müssen sich immer an diese dumme Arithmetik erinnern. Wenn Sie auf beiden Seiten Ränder oder Hintergründe festgelegt haben, haben diese unterschiedliche Höhen, sodass Sie wirklich groteske Dinge tun müssen , damitrepariere es. Und Bildschirmleser lesen die gesamte Seitenleiste, bevor sie zum Haupttext übergehen, der für Benutzer ziemlich unhöflich ist. Daher müssen Sie ein noch komplexeres Setup mit drei Spalten verwenden, von denen die Mitte zuerst in HTML angezeigt wird.

Als Ergebnis erhalten wir ein Design, das schön aussieht, gut funktioniert und korrekt skaliert, aber durch extrem chaotischen CSS-Code beschrieben wird. Nichts, was Sie geschrieben haben, entsprach tatsächlich dem, was Sie wollten - und dies sind die Hauptteile des Designs und nicht die Seitenrahmen! Es war schwer zu verstehen, wie der CSS-Code verbunden ist und was auf dem Bildschirm angezeigt wird. Und dann wird sich die Situation noch viel verschlechtern, bevor sie sich endgültig verbessert.

Vorschaubild - 2

Mit einem neuen Spielzeug können wir unser Miniaturgitter verbessern. Das ursprüngliche Tabellenlayout war unglaublich langwierig, auch wenn Sie keine Tag-Semantik angegeben haben. Jetzt kannst du es besser machen!

<ul class="thumbnail-grid">
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    <li><img src="..."><br>caption</li>
    ...
</ul>

Dies ist ideal: HTML speichert Seiteninhalte in einer vernünftigen Form, und dann beschreibt CSS, wie es tatsächlich aussieht.

Leider wird die Implementierung am floatetwas unhöflich sein. Diese neue Version passt sich besser an unterschiedliche Bildschirmgrößen an, erfordert jedoch einige Hacks: Die Zellen müssen eine feste Höhe haben, das Zentrieren des gesamten Rasters ist ziemlich schwierig und der Rastereffekt verschwindet mit breiteren Elementen. Es wird klar, dass wir fast dieselbe Tabelle haben, aber mit einer flexiblen Anzahl von Spalten. Wir versuchen nur, es nachzuahmen.

Sie brauchen auch diesen seltsamen Zauber clearfix, der in dieser Zeit berüchtigt war. Da float den "Cursor" dann nicht bewegt<ul>mit schwimmerelementen null höhe. Es endet genau dort, wo es beginnt, und alle Float-Thumbnails erhalten von unten genügend Schlaf. Schlimmer noch, da alle nachfolgenden Elemente keine benachbarten Gleitkommazahlen haben, ignorieren sie die Miniaturansichten vollständig und rendern weiter unter einem leeren „Raster“ - was zu einem Durcheinander führt!

Die Lösung besteht darin, am Ende der Liste ein Dummy-Element hinzuzufügen , das keinen Speicherplatz beansprucht, sondern ein CSS-Attribut enthält clear: both, das es unter allen Gleitkommazahlen weglässt. Dadurch werden letztere effektiv <ul>unter die Miniaturansichten gedrückt, und sie haften von unten sauber an ihnen.

Später werden Browser beginnen, Pseudoelemente von „generierten Inhalten“ ::beforeund zu unterstützen::after, wodurch das Dummy-Element vollständig aufgegeben wird. Stylesheets aus der Mitte der 2000er Jahre enthielten häufig die folgenden Zeilen:

.thumbnail-grid::after {
    content: '';
    display: block;
    clear: both;
}

Und doch war es besser als Tische.

DHTML

Als kurzen Exkurs in der Welt der JavaScript, um die neumodische Eigenschaft hat position wirklich ein etwas dynamisches Layout aktiviert. Ich bin von ganzem Herzen gegen eine solche Häresie, nicht zuletzt, weil niemand es jemals richtig gemacht hat, aber es hat Spaß gemacht, es zu spielen.

So begann die Ära des „dynamischen HTML“, dh HTML mit JavaScript-Effekten. Jetzt ist dieser Begriff völlig aus der Mode gekommen, denn jetzt können wir ohne JavaScript nicht einmal einen verdammt statischen Blog erstellen. Alles begann viel harmloser: Teenager fügten Glitzer auf der Seite ein, die dem Mauszeiger folgte, oder eine kleine analoge Uhr, die in Echtzeit tickte.

Die beliebteste Sammlung solcher Skripte war Dynamic Drive. - Diese Seite existiert auf wundersame Weise immer noch. Es enthält wahrscheinlich Hunderte von Spielzeugen, die seit Anfang der 2000er Jahre nicht mehr aktualisiert wurden.

Wenn Sie nicht in diese Sammlung eintauchen möchten, finden Sie hier ein Beispiel: Jedes Jahr (außer der aktuellen, wenn ich es vergessen habe, sorry) füge ich meinem Blog gerne Konfetti und anderen Unsinn hinzu. Ich bin sehr faul, also habe ich die Tradition mit Hilfe dieses Skripts begonnen, das ich irgendwo gefunden habe . Es war ursprünglich für Schneeflocken gedacht und platzierte eine Reihe von Bildern auf der Seite mit position: absoluteund änderte dann wiederholt ihre Koordinaten.

Vergleichen Sie dies mit der Version, die ich vor ein paar Jahren von Grund auf neu geschrieben habe : Hier ist nur winziger JS-Codeum die Bilder anzupassen, animiert der Browser sie dann mit CSS. Dies ist ein etwas weniger funktionales Skript, aber es ermöglicht dem Browser, die gesamte Arbeit zu erledigen, möglicherweise sogar mit Hardwarebeschleunigung. So weit sind wir gekommen.

Web 2.0

Dunkle Zeiten können nicht ewig dauern. Es fand eine Reihe von Ereignissen statt, die uns ins Licht zogen.

Eines der Hauptereignisse war die Veröffentlichung von Firefox - oder für Fortgeschrittene zunächst Phoenix und dann Firebird. Version 1.0 erschien im November 2004 - und begann, IE gut zu knabbern. Der Browser arbeitete am neu geschriebenen Kern von Netscape 6, der aus dem Herzen der Mozilla Suite-Software-Suite in eine separate Anwendung extrahiert wird. Es war schnell, einfach und viel besser darin, Standards aufrechtzuerhalten, obwohl absolut nichts davon von Bedeutung war.

Die reale Sache war, dass Firefox Tabs hatte. In IE 6 waren sie nicht. Wenn Sie eine zweite Webseite öffnen möchten, haben Sie ein neues Fenster geöffnet. Das ist verdammt beschissen. Firefox ist ein echtes Wunder geworden.

Natürlich war Firefox nicht der erste Browser mit Registerkarten, im vollständigen Browser der Mozilla Suite gab es sie auch, und in der fortgeschrittenen Opera gibt es sie schon seit Ewigkeiten. Aber aus verschiedenen Gründen war es Firefox, der startete, nicht zuletzt aufgrund der Tatsache, dass es oben keine riesige verdammte Werbetafel wie Opera gab.

Natürlich haben Designer Firefox im Zusammenhang mit der Unterstützung von Standards beworben, aber dieses Argument zog nur andere Designer an, nicht ihre Eltern. Eine der beliebtesten und spektakulärsten Demonstrationen war der Acid2-Test , mit dem moderne Webstandards getestet werden sollen. Er zeigte einen schönen Smiley, wenn die Standards richtig ausgearbeitet waren, und ein höllisches Bild in IE 6 .

Acid2-Testergebnis im IE 6-Browser

Der frühe Firefox war nicht perfekt. Aber natürlich unterstützte er die Standards viel besser und man konnte den Fortschritt sehen, bis der Browser alle Tests mit der Veröffentlichung von Firefox 3 vollständig bestanden hatte.

Firefox wurde auch von der schnelleren JavaScript-Engine unterstützt: Dies war vor JIT. Es war viel, viel schneller als IE. Soweit ich mich erinnere, hat IE 6 beispielsweise die getElementByIdIteration des gesamten Dokuments implementiert , selbst bei eindeutigen Bezeichnern. Schauen Sie sich die alten Ankündigungen zur jQuery-Version an , die normalerweise von Leistungsdiagrammen begleitet wurden. Dort sind alle Browser um eine Größenordnung schneller als IE 6-8.

Oh, und dann war IE 6 eine riesige Sicherheitslücke, insbesondere mit nativer Unterstützung für beliebige Binärkomponenten, die nur auf "Ja" im abstrusen Dialogfeld klicken mussten, um vollen und unbegrenzten Zugriff auf Ihr System zu erhalten. Dies hat wahrscheinlich nicht zum Ruf des IE beigetragen.

Mit dem Aufkommen der geringsten Alternative zum Internet Explorer konnten selbst die bösartigsten Designer die Website nicht einfach für den Internet Explorer 6 optimieren und dort enden. Jetzt gab es einen Grund, den strengen Modus zu verwenden, es gab einen Grund, sich um Kompatibilität und Standards zu kümmern, und Firefox bemühte sich ständig, diese so weit wie möglich einzuhalten, während IE 6 stagnierte.

(Ich würde sagen, dass dieser Effekt sowohl für OS X als auch für das iPhone die Tür geöffnet hat. Ich mache keine Witze! Denken Sie darüber nach: Wenn der iPhone-Browser mit nichts wirklich funktioniert hat, weil alle noch Websites für den Internet Explorer erstellt haben 6, es würde nur eine teure Alternative zu Palm bleiben. Denken Sie daran, dass Apple zunächst nicht einmal seine eigenen Anwendungen veröffentlichen wollte - es stützte sich auf das Internet).

(Safari wurde übrigens im Januar 2003 veröffentlicht, basierend auf der KHTML-Gabel des KDE Konqueror-Browsers. Ich glaube, ich habe damals KDE verwendet, also war es sehr interessant, aber niemand hat wirklich über OS X nachgedacht lächerlicher Marktanteil von 2%).

Ein weiterer wichtiger Faktor trat am 1. April 2004 auf, als Google Google Mail ankündigte. Ha ha! Es ist lächerlich. Praktisches Webinterface für Mail? Guter Witz, Google.

Oh Scheiße. Sie scherzen nicht.Wie funktioniert diese interaktive Sache?

Heutzutage kennt jeder Webentwickler die Antwort - dies ist XMLHttpRequest, so genannt, weil niemand es jemals für XML-Abfragen verwendet hat. Es wurde von Microsoft für Exchange Mail erfunden und dann von Mozilla geklont (ich zitiere nur aus Wikipedia ).

Wichtig ist, dass Sie mit XMLHttpRequest eine HTTP-Anforderung über JavaScript erstellen können. Jetzt können Sie nur einen Teil der Seite mit den neuen Daten vollständig im Hintergrund aktualisieren, ohne sie neu laden zu müssen. Niemand hatte zuvor von dieser Sache gehört, und als Google einen ganzen E-Mail-Client darauf einführte, war es absolute Magie.

Vielleicht ist all dies ein Fehler, der zu einer höllischen Zukunft führen wird, in der statische Seiten ohne ersichtlichen Grund drei Textabschnitte im Hintergrund mit XHR laden, aber dies ist das Thema für einen anderen Artikel .

In ähnlicher Weise wurde jQuery, ein ähnliches Wunder, im August 2006 veröffentlicht. Er beschrieb nicht nur die Unterschiede zwischen den IE-APIs „JScript“ und den Standardansätzen aller anderen (was früher von anderen Bibliotheken durchgeführt wurde), sondern vereinfachte auch die gleichzeitige Arbeit mit ganzen Gruppen von Elementen erheblich, was historisch gesehen ein großer Schmerz im Arsch blieb. Jetzt ist es ziemlich einfach, CSS überall mit JavaScript anzuwenden! Das ist eine schlechte Idee, aber in dieser Situation gab es keine bessere Option!

Ich höre dich stören: Wieder JavaScript! Ist das ein Artikel über CSS?

Du liegst absolut richtig! Ich erwähne die wachsende Beliebtheit von JavaScript, weil es dank eines weiteren wichtigen Faktors direkt zum modernen Zustand von CSS führte:

Ambition

Firefox hat gezeigt, dass Browser sehr schnell wachsen können - jede neue Verbesserung in Acid2 war aufregend. Google Mail hat uns gezeigt, dass das Web mehr kann als nur einfachen Text mit fallenden Schneeflocken anzuzeigen.

Und die Leute begannen zu phantasieren .

Das Problem war, dass die Browser nicht besser wurden. Firefox hielt sich in mancher Hinsicht schneller und genauer an die CSS-Spezifikation, tat aber im Grunde nichts Neues. Nur die Toolbox wurde verbessert , und dies hat hauptsächlich JavaScript betroffen. CSS ist eine statische Sprache, daher können Sie keine Bibliothek schreiben, um sie zu verbessern. Das Erstellen von CSS mit JavaScript war möglich, aber verdammt, es ist immer eine schlechte Idee.

Ein weiteres Problem war, dass CSS 2 wirklich nur gut zum Stylen von Rechtecken geeignet ist. Es war wunderbar in den 90ern, als jedes Betriebssystem eine rechteckige Oberfläche hatte. Aber es ist an der Zeit für Windows XP und OS X, wo alles brillant, glänzend und abgerundet ist. Es war etwas umständlich, dass sich in Ihrem Dateibrowser abgerundete Ecken und saubere Häkchen mit Schatten befinden , aber nirgendwo im Internet.

Also kehrten die dunklen Zeiten zurück.

Das CSS-Hack-Zeitalter

Designer wollten viel von dem, was CSS einfach nicht bieten konnte.

Abgerundete Ecken. Quadratische waren aus der Mode gekommen, und jetzt wollten alle Knöpfe mit runden Ecken, da „die Zukunft bei ihnen liegt“ (native Knöpfe waren aus irgendeinem Grund ebenfalls aus der Mode gekommen). Leider konnte CSS dies nicht tun. Deine Optionen:
1. . , . .
2. , . , .
3. , 3×3 . JavaScript.
4. , - lol
, IE 6 PNG 8- - ; 1-, , , GIF. , :
```
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bite-my-ass.png');
```
: ! . .
. CSS 3 opacity… IE, filter. , PNG, … , .
jQuery , fadeIn, . - , 2000- Linux ( ) .

, , JavaScript, . , , .
! . , , , . CSS , <tr class="odd"> (, !) - jQuery.
CSS 2 >, , ul.foo > li , , IE 6 — — !

Aber all dies sind rein ästhetische Überlegungen. Wenn Sie sich für das Layout interessieren, hat das Erscheinungsbild von Firefox Ihr Leben sofort viel einfacher und komplizierter gemacht.

Erinnerst du dich inline-block? Firefox 2 unterstützt es tatsächlich! Es war fehlerhaft und hinter dem Herstellerpräfix versteckt, aber es funktionierte mehr oder weniger, sodass Designer versuchen konnten, es zu verwenden. Und dann kam Firefox 3 heraus, das es mehr oder weniger normal unterstützte, was wie ein Wunder schien. Die dritte Version unseres Miniaturbildrasters ist nicht komplizierter als die Breite und inline-block:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
}

Die allgemeine Idee inline-blockist, dass das Innere wie ein Block wirkt, der Block selbst jedoch wie ein Bild im Klartext platziert wird. Somit wird jedes Miniaturbild in einen Container gelegt, aber alle diese Container liegen nebeneinander und gehen aufgrund ihrer gleichen Breite in das Raster. Und da es sich funktional um eine Textzeile handelt, gibt es keine merkwürdigen Auswirkungen auf den Rest der Seite, wie dies bei float der Fall war.

Natürlich gab es einige Nachteile. Zum Beispiel kann mit dem verbleibenden Speicherplatz nichts getan werden, sodass die Gefahr bestand, dass auf nicht standardmäßigen Großbildschirmen rechts ein großes Feld angezeigt wird. Es gab auch das Problem des Netzbruchs durch eine breite Zelle. Aber zumindest ist es kein Schwimmer.

Ein kleines Problem blieb: IE 6. Es wurde technisch unterstütztinline-block, aber nur auf natürlich eingebauten Elementen wie <b>und <i>, aber nicht <li>. So wollen (oder denken) Sie das nicht wirklich inline-block. Eh.

Glücklicherweise entdeckte das absolute Genie irgendwann eine hasLayoutinterne Optimierung im IE, die markiert, ob das Element ... äh ... Markup hat. Hör zu, ich weiß es nicht. Grundsätzlich ändert sich der Renderpfad für Elemente - es handelt sich also nicht um diese, sondern um andere Fehler , die auftreten , wie z. B. den Kompatibilitätsmodus für jedes Element! Als Ergebnis stellt sich heraus, dass alle oben genannten Funktionen in IE 6 funktionieren, wenn Sie ein paar Zeilen hinzufügen:

.thumbnails li {
    display: inline-block;
    width: 250px;
    margin: 0.5em;
    vertical-align: top;
    *zoom: 1;
    *display: inline;
}

Die Sternchen am Anfang machen die Eigenschaft ungültig, daher sollten Browser die gesamte Zeile ignorieren ... aber aus einem unbekannten Grund ignoriert IE 6 die Sternchen und akzeptiert den Rest der Regel (fast alle Satzzeichen, einschließlich eines Bindestrichs oder - mein persönlicher Favorit - Unterstrich). Eine Eigenschaft zoom ist eine Microsoft-Erweiterung, die alles skaliert, mit dem Nebeneffekt, dass die Layout-Eigenschaft auf das Element festgelegt wird. Und es display: inline sollte jedes Element zwingen, seinen Inhalt in eine große Textzeile einzufügen, aber IE verarbeitet das Element inlinemit der Eigenschaft "Markup" so etwas wie inline-block.

Und hier sehen wir das wahre Potenzial von CSS-Hacks. Browserspezifische Regeln mit absichtlich schlechter Syntax, die ein Browser ignorieren würde, reproduzieren einen Effekt, der von dem, was Sie schreiben, immer noch unverständlich ist. In ganzen Lehrbüchern wurde erklärt, wie man etwas Einfaches wie ein Raster macht, aber dies funktioniert in den meisten Browsern der Zeit. Sie werden auch sehen * html, html > /**/ bodyund alle möglichen anderen Unsinn. Hier ist die vollständige Liste ! Und erinnerst du dich an den Hack "Clearfix"? Die Vollversion , die mit allen Browsern kompatibel ist, ist etwas schlechter:

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Ist es ein Wunder, dass sich die Leute über CSS beschweren?

Es war eine Ära des blinden Kopierens und Einfügens in vergeblichen Versuchen, dieses verdammte Ding zum Laufen zu bringen. Beispiel: Jemand (ich habe den Quellcode einmal ausgegraben, kann ihn aber jetzt nicht finden) hatte die seltsame Idee, immer zu installieren body { font-size: 62.5% }, da relative Einheiten angeblich "gut" sind, aus dem Wunsch heraus, die Standardschriftgröße des Browsers von 16px zu überschreiben (was, es stellt sich als richtig heraus) und die Notwendigkeit, mit IE-Fehlern umzugehen. Nach einiger Zeit hörte er damit auf, aber der Schaden wurde angerichtet, und Tausende von Websites haben auf diese Weise gehandelt, da dies als "Best Practices" angesehen wurde. Dies bedeutet, dass Sie Unsinn bekommen, wenn Sie die Standardschriftgröße Ihres Browsers in eine beliebige Richtung ändern möchten. Wenn Sie sie reduzieren und eine Reihe von Webseiten mikroskopisch klein werden, wenn Sie sie erhöhen, bleibt alles klein, wenn Sie sie noch weiter erhöhen Dann werden Websites, die Ihre Entscheidung respektieren, riesig. Zumindest heute haben wir eine bessere Skalierung, denke ich.

Ja, und denken Sie daran: StackOverflow wurde noch nicht angezeigt. Alles Wissen wurde von Mund zu Mund weitergegeben. Wenn Sie Glück haben, kennen Sie einige Websites mit Tipps wie QuirksMode und Eric Meyer.

Schauen Sie sich Mayers CSS / Edge- Site an . Es gibt einige wilde Beispiele, die Menschen bereits mit CSS 1 im Jahr 2002 gemacht haben. Ich denke immer noch, dass complexspiral ein reines Genie ist, obwohl heutzutage alles mit opacitynur einem Bild erledigt ist . Methoden von raggedfloat erhielten erst vor wenigen Jahren native CSS-Unterstützung, mit dem Aufkommen von shape-outside! Dieser Autor hat uns auch einen CSS-Reset gegeben , um die Unterschiede zwischen den Standard-Browser-Stilen zu beseitigen.

(Eric Meyers Rolle in CSS ist schwer zu überschätzen. Als seine kleine Tochter Rebecca vor sechs Jahren starb, wurde sie mit ihrer eigenen CSS-Farbe verewigt, rebeccapurple, ein einzigartiger Fall. So sehr schätzt seine Online-Community! Nun, jetzt muss ich ein wenig über diese Geschichte weinen.)

Die Zukunft kommt, aber allmählich

Designer und Entwickler haben nach und nach die Grenzen der Möglichkeiten von Browsern erweitert. Browser haben es bisher etwas schlecht geschafft. Alle Korrekturen, Problemumgehungen und Bibliotheken waren geheim, fragil, fehleranfällig und / oder schwer.

Offensichtlich benötigten Browser neue Funktionen. Aber es zu veröffentlichen war nicht genug; Microsoft hat viel getan, und im Grunde hat es zu einem neuen Durcheinander geführt.

Es fanden jedoch mehrere verzweifelte Versuche statt. Da der Kopf des W3C immer noch in seinem eigenen Hintern saß und sogar die vorgeschlagenen HTML-Verbesserungen zugunsten von XML ablehnte, beschlossen einige der aktiven Browser-Entwickler (Apple, Mozilla und Opera), einen eigenen Club zu gründen. Im Juni 2004 wurde die WHATWG-Arbeitsgruppe gebildet, die mit der Arbeit am HTML5-Standard begann. Letztendlich entfällt die Notwendigkeit von XHTML vollständig und eine Reihe von Sicherheitsproblemen bei der Arbeit mit normalem HTML. Darüber hinaus bot es einige neue Vorteile, z. B. native Unterstützung für Audio-, Video- und Formularsteuerelemente für Datumsangaben und Farben. Und andere Dinge, die von JavaScript-Steuerelementen ungeschickt unterstützt werden. Und ähm, sie werden dort immer noch ungeschickt unterstützt.

Dann kam CSS 3. Ich weiß nicht, zu welchem Zeitpunkt dies passiert ist. Er erschien langsam und mit aller Kraft wie ein Küken, das aus einem Ei geschlüpft war und es nicht eilig hatte, verdammt noch mal, nirgendwohin zu gehen.

Ich kann viele vernünftige Annahmen treffen. Ich denke, es hat damit begonnen border-radius. Insbesondere mit -moz-border-radius. Ich weiß nicht, wann es zum ersten Mal eingeführt wurde, aber der Mozilla-Bug-Tracker erwähnt es bereits 1999.

Die Benutzeroberfläche von Firefox wird mithilfe von CSS gerendert. Wenn Mozilla etwas tun wollte, das mit CSS nicht möglich war, fügte sie ihre eigene Eigenschaft mit einem Präfix hinzu, -mozum anzuzeigen, dass es sich um ihre eigene Erfindung handelte. Und wenn dies keinen wirklichen Schaden anrichtet, wurde die Immobilie für Websites verfügbar gemacht.

Ich denke, der Vorstoß für CSS 3 begann wirklich, als Firefox startete - und die Designer entdeckten die Eigenschaft -moz-border-radius. Plötzlich tauchten eingebaute abgerundete Ecken auf! Keine Aufregung mehr in Photoshop, schreiben Sie einfach eine Zeile! Fast über Nacht wurden überall runde und runde Ecken eingesägt.

Und von dort rollte alles wie ein Schneeball. Häufige Probleme wurden einzeln mit Hilfe neuer CSS-Funktionen gelöst, die zu einer neuen Version von CSS - CSS 3 kombiniert wurden. Die Hauptprobleme lösten die zuvor genannten Entwurfsprobleme:

Abgerundete Ecken mit border-radius.
Farbverläufe mit linear-gradient()usw.
Der mehrfache Hintergrund an sich war kein Problem, erleichterte aber einige andere Dinge.
Transparenz mit opacityund Alphakanal in Farben.
Schatten an Containern.
, CSS 2, 2.1 .
(border image), , .
jQuery ( JS ).
:nth-child(), CSS.
. , ? SVG, , . , , , CSS! . .
Web-Schriftarten, die seit einiger Zeit in CSS vorhanden sind, jedoch nur im IE und nur mit einigen dummen DRM-geladenen Schriftarten implementiert sind. Jetzt sind wir nicht auf die vier schlechten Schriftarten beschränkt, die mit Windows geliefert werden und die sonst niemand hat!

Es war einfach toll! Diese Funktionen haben keine Layoutprobleme gelöst, aber sie haben ästhetische Probleme gelöst, die Designer verwendet haben, um mit vielen Bildern und / oder JavaScript ungeschickt herumzuarbeiten. Dies bedeutete weniger Downloads und weniger Bilder, die anstelle von Text verwendet wurden, was für das Web ziemlich gut war.

Die große Ironie ist, dass diese Designeffekte fast sofort aus der Mode kamen und wir jetzt wieder zu flachen Rechtecken zurückkehren.

Höllenanbieterpräfixe in Browsern

Ach! Die Welt war immer noch nicht in Ordnung.

Einige dieser neuen Gizmos wurden ursprünglich von Browserherstellern entwickelt und haben ein Präfix. Einige der späteren wurden vom CSS-Komitee entwickelt und dann von Browsern implementiert, als das Design noch in der Entwicklung war. Also gab es auch hier Präfixe.

Und die Hölle der Präfixe begann , die bis heute andauert.

Mozilla wurde -moz-border-radiusdaher bei der Implementierung von Safari als -webkit-border-radius"WebKit" bezeichnet ("WebKit" ist der Name der Apple Fork KHTML). Dann wurde es in der CSS 3-Spezifikation standardisiert und einfach benannt border-radius. Wenn Sie also abgerundete Ränder verwenden möchten, müssen Sie tatsächlich drei Regeln formulieren:

element {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

Die ersten beiden haben den Effekt tatsächlich in aktuellen Browsern enthalten, und der letzte ist für die Zukunft registriert: Wenn Browser die eigentliche Regel implementieren und die Präfixe löschen, wird sie wirksam.

Sie mussten dies jedes verdammte Mal tun, da CSS keine Programmiersprache ist und keine Makros, Funktionen oder dergleichen hat. Manchmal führten Opera und IE ihre eigenen Implementierungen mit Präfixen ein, -o-und -ms-als Ergebnis erreichte die Gesamtzahl der Zeilen fünf. Mit Steigungen wurde es viel schlimmer; Die Syntax wurde einer Reihe schwerwiegender inkompatibler Überarbeitungen unterzogen, sodass Sie sich nicht einmal darauf verlassen konnten, den Namen der Eigenschaft zu kopieren / einzufügen und zu ändern!

Und viele Designer haben es vermasselt. Ich kann ihnen nicht zu viel vorwerfen; Ich meine, es ist scheiße. Viele Seiten zeigten jedoch nur Präfixformulare an, nicht das endgültige. Daher mussten Browser Präfixformulare länger pflegen, als sie möchten, um nichts zu beschädigen. Und wenn das Präfixformular immer noch funktioniert und Sie es gewohnt sind, benötigen Sie möglicherweise keine universelle Option.

Schlimmer noch, einige werden nur verwenden , die Form , die in ihrem Lieblings - Browser funktioniert. Mit dem Aufkommen mobiler Webbrowser wurde es besonders schlimm. Die in iOS und Android integrierten Browser sind Safari (WebKit) und Chrome (ursprünglich WebKit, jetzt Fork), sodass Sie nur das Präfix -webkit- benötigen. Das machte Mozilla schwieriger, als es Firefox für Android veröffentlichte.

Erinnern Sie sich an diesen Fehler mit IE 6? Hier sind wir wieder! Die Situation war so beschissen, dass Mozilla sich letztendlich entschied, eine Reihe von Funktionen zu implementieren-webkit- , die auch auf Desktop-Firefox noch unterstützt werden. Die Situation ist so dumm, dass Firefox nur noch einige Effekte durch diese Eigenschaften unterstützt, wie z. B. -webkit-text-Stroke , der nicht standardisiert ist.

Darüber hinaus heißt die aktuelle gegabelte Chrome-Engine Blink, daher sollten technisch keine Eigenschaften verwendet werden -webkit-. Und doch sind sie es. Zumindest ist dies nicht so schlimm wie verwirrende Zeichenfolgen für Benutzeragenten .

Jetzt haben die Entwickler von Browsern Präfixe weitgehend aufgegeben. Stattdessen verbergen sie die experimentellen Funktionen hinter den Flags (daher funktionieren sie nur auf Entwicklungsmaschinen, die sie erzwingen). Neue Funktionen sollten theoretisch kleiner und leichter zu stabilisieren sein.

Dieses ganze Durcheinander ist wahrscheinlich zu einem großen Motivationsfaktor für die Entwicklung von Sass und LESS geworden , den beiden Sprachen, die CSS-Code (Präprozessoren) produzieren. Sie haben sehr ähnliche Ziele: Beide fügen CSS Variablen, Funktionen und einige Arten von Makros hinzu, wodurch Sie viele Wiederholungen, Browser-Hacks und anderen Unsinn aus Ihrem Code ausschließen können. Zur Hölle, ich benutze SCSS immer noch selbst , obwohl die allgemeine Nutzung der Branche allmählich abnimmt.

Flexbox

Aber dann, als wäre ein Engel vom Himmel herabgekommen ... Flexbox .

Flexbox gibt es schon sehr lange - teilweise Unterstützung gab es angeblich schon 2006 in Firefox 2! Er durchlief mehrere inkompatible Revisionen und es dauerte ewig, bis er sich stabilisiert hatte. Dann konnte der IE jahrelang keine Unterstützung implementieren, und Sie möchten sich nicht auf ein Layout verlassen, das nur für die Hälfte Ihrer Zielgruppe funktioniert. Erst vor relativ kurzer Zeit (2015? Später?) Wurde Flexbox für eine sichere Verwendung ausreichend umfassend unterstützt. Und ich kann schwören, dass ich immer noch Menschen begegne, deren Safari es ohne Präfixe überhaupt nicht erkennt, obwohl Safari die Präfixe vor fünf Jahren fallen gelassen zu haben scheint ...

In jedem Fall ist Flexbox eine CSS-Implementierung eines ziemlich gängigen GUI-Layout-Tools: Sie haben ein Elternteil mit mehreren untergeordneten Elementen, und das übergeordnete Element verfügt über freien Speicherplatz, der automatisch von den untergeordneten Elementen gemeinsam genutzt wird. Und das bringt die Objekte nebeneinander .

Die allgemeine Idee ist, dass der Browser berechnet, wie viel freier Speicherplatz der Elternteil und die „Anfangsgröße“ jedes Kindes hat, wie viel zusätzlichen Speicherplatz vorhanden ist, und ihn entsprechend der Flexibilität jedes Kindes verteilt. Stellen Sie sich eine Symbolleiste vor: Sie können jeder Schaltfläche eine feste Größe (Flex 0) zuweisen, aber Abstandhalter hinzufügen, die den verbleibenden Platz gleichmäßig aufteilen. Geben Sie ihnen also Flex 1.

Sobald dies erledigt ist, haben Sie auch mehrere Optionen für bequeme Optionen: Sie können zusätzlichen Platz zwischen den Kindern verteilen , Sie können sie auf die gleiche Höhe strecken oder sie auf unterschiedliche Weise ausrichten, Sie können sie sogar auf mehrere Reihen übertragen, wenn nicht alle passen!

Damit können wir unser Miniaturbildraster weiter optimieren :

.thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
}
.thumbnail-grid li {
    flex: 1 0 250px;
}

Das ist nur ein Wunder. Sie können sofort vergessen inline-block. Dieser Code drückt sehr deutlich aus, was wir brauchen.

…fast. Er hat immer noch das Problem, dass zu breite Zellen das Gitter zerreißen, da dies immer noch eine horizontale Reihe ist, die auf mehrere unabhängige Linien übertragen wird. Aber das ist immer noch ziemlich cool und löst eine Reihe anderer Layoutprobleme. Das ist wahrscheinlich genug. Wenn nur ...

Ich würde sagen, dass die massive Einführung von Flexbox die moderne Ära von CSS einleitete. Es gab nur ein ungelöstes Problem. ...

Langsamer, schmerzhafter Tod des IE

IE 6 hat den Markt für sehr lange Zeit verlassen. Bis Anfang 2010 oder so konnte es nicht unter 10% des Marktes fallen (immer noch ein riesiger Teil).

Firefox erreichte Ende 2004 die Version 1.0. IE 7 kam nur zwei Jahre später heraus, bot nur bescheidene Verbesserungen, litt unter Kompatibilitätsproblemen mit Websites für IE 6, und viele IE 6-Benutzer (meist unerfahrene Benutzer) sahen überhaupt keinen Grund für das Update. Vista kommt mit IE 7, aber Vista stellte sich als eine Art Fehler heraus - ich glaube nicht, dass es jemals in meinem ganzen Leben nahe daran war, XP zu überholen.

Weitere Faktoren waren IT-Richtlinien für Unternehmen, die häufig die Form „Nie etwas aktualisieren“ annehmen - und dies oft aus gutem Grund, weil ich endlose Geschichten über interne Anwendungen hörte, die nur in IE 6 aus allen möglichen schrecklichen Gründen funktionierten. Dann gab es ganz Südkorea , das gesetzlich zur Verwendung von IE 6 verpflichtet war, da im Gesetz einige Sicherheitsanforderungen verankert waren , die nur mit dem ActiveX-Steuerelement in IE 6 implementiert werden

konnten. Wenn Sie also die verwendete Website unterstützten - oder noch schlimmer, erforderlichzur Verwendung - von Personen aus Unternehmen oder anderen Ländern ist die Unterstützung für IE 6 ziemlich schwierig. Personen, die kleine persönliche Tools und Websites erstellen, haben die IE 6-Kompatibilität sofort aufgegeben und zunehmend unangenehme Banner für Websites von IE 6-Benutzern angezeigt ... Aber wenn Sie ein Geschäftsmann sind, wie kann man den sofortigen Verlust von 20% des potenziellen Publikums erklären? Arbeite einfach härter!

Im Laufe der Jahre hat der Stress zugenommen, da CSS zunehmend funktionsfähig geworden ist und IE 6 ein Anker geblieben ist. Er verstand PNG Alpha immer noch nichtOhne Problemumgehungen und in der Zwischenzeit hatten wir immer wichtigere Funktionen, wie z. B. native Videos in HTML5. Problemumgehungen wurden immer verwirrender und die Liste der Funktionen, die Sie einfach nicht verwenden konnten, wurde länger. Ich würde zeigen, wie mein Blog in IE 6 aussieht, aber es ist unwahrscheinlich, dass Sie überhaupt eine Verbindung dazu herstellen - das von ihm unterstützte TLS ist so alt und kaputt, dass es auf den meisten Servern bereits deaktiviert ist!

Einzelne Entwickler des YouTube-Teams haben separate Anfragen gestellt. Ohne jemanden um Erlaubnis zu bitten, fügten sie im Juli 2009 ein Warnbanner hinzu, in dem IE 6-Benutzer aufgefordert wurden, zu etwas zu wechselneine andere, da die Unterstützung älterer Browser bald endet. Innerhalb eines Monats sank der weltweite Anteil des IE6-Verkehrs um mehr als 10%. Nicht alle Helden tragen Regenmäntel.

Ich würde den Beginn des Endes von IE6 an dem Tag markieren, an dem YouTube die Unterstützung für IE 6 wirklich deaktiviert hat. Dies geschah am 13. März 2010, fast neun Jahre nach der Veröffentlichung dieser Version des Browsers. Ich weiß nicht, wie sehr YouTube Unternehmensnutzer oder die südkoreanische Regierung betrifft, aber die Weigerung eines großen Webunternehmens, einen gesamten Browser zu unterstützen, sendet eine ziemlich starke Botschaft.

Natürlich gab es andere Versionen von IE, und viele von ihnen hatten an sich andere Kopfschmerzen. Aber jede Folge wurde weniger schmerzhaft, und jetzt müssen Sie nicht mehr zu viel über das Testen im IE (jetzt Edge) nachdenken. Es ist Zeit für Microsoft, seine eigene Rendering-Engine aufzugeben und zum Chrome-Klon zu wechseln.

Jetzt

CSS ist momentan sehr gut. Sie brauchen keine seltsamen Hacks, um nur Objekte in der Nähe zu platzieren. Browser-Entwicklungstools sind jetzt integriert und verdammt erstaunlich - Firefox hat Sie speziell gewarnt, wenn einige CSS-Eigenschaften aufgrund der Werte anderer Eigenschaften nicht wirksam werden! Unklare implizite Nebenwirkungen wie "Stapelkontexte" können jetzt explizit festgelegt werden - wie Eigenschaften isolation: isolate.

Lassen Sie mich einfach alles auflisten, was Ihnen an modernen CSS-Funktionen in den Sinn kommt. Dies ist kein Leitfaden für alle möglichen Verwendungen von Stilen, aber wenn Ihr CSS-Wissen seit 2008 nicht aktualisiert wurde, hoffe ich, dass dies Ihren Appetit steigern wird. Und das alles ist nur CSS! So viel, was bisher unmöglich, schmerzhaft oder umständlich war, wird jetzt zunächst unterstützt - Audio, Video, Freihandzeichnen, 3D-Rendering ... ganz zu schweigen von den enormen ergonomischen Verbesserungen von JavaScript.

Layout

Der Rastercontainer kann fast alles, was die Tabellen getan haben, und noch mehr, einschließlich der automatischen Ermittlung der Anzahl der Spalten. Das ist verdammt erstaunlich. Mehr dazu weiter unten.

Der Flexbox- Container zerlegt seine untergeordneten Elemente in eine Zeile oder Spalte, sodass jeder seine Standardgröße und den gewünschten Speicherplatz angeben kann . Sie können diese Container einwickeln, die untergeordneten Elemente neu anordnen, ohne die Reihenfolge der Quelle zu ändern, und die untergeordneten Elemente auf verschiedene Arten ausrichten.

Spalten können Text in mehrere Spalten aufteilen.

Eigentumbox-sizingMit dieser Option können Sie das IE-Containermodell für einzelne Elemente auswählen, wenn das gesamte Element einen festen Platz einnehmen soll und Ränder und Einzüge von der Gesamtbreite abgezogen werden .

display: contentsspeichert den Inhalt eines Elements in seinem übergeordneten Element, als wäre es überhaupt nicht vorhanden. display: flow-root- Dies ist im Grunde genommen ein automatischer Clearfix, nur ein Jahrzehnt später.

widthzu können nun eingestellt werden min-content, max-contentoder eine Funktion fit-content()für flexiblere Verhalten.

white-space: pre-wrapbehält Leerzeichen bei, bricht jedoch bei Bedarf Linien, um ein Überlaufen zu vermeiden. Auch nützlich pre-line, wodurch Leerzeichen auf eins reduziert werden, aber wörtliche Zeilenumbrüche beibehalten werden.

text-overflowschneidet ausführlichen Text mit Auslassungspunkten (oder einem benutzerdefinierten Zeichen) ab, wenn das Limit überschritten wird, und schneidet es nicht nur ab. Ebenfalls in den Spezifikationen ist die Funktion zum reibungslosen Ausblenden von Text (Ausblenden) enthalten, die jedoch noch nicht implementiert wurde.

shape-outsideÄndert die Form des Textflusses. Es kann sogar den Alpha-Kanal des Bildes als Formular verwenden.

resizegibt einem beliebigen Element einen Größenänderungsdeskriptor (wenn es einen Überlauf hat).

writing-modelegt die Richtung des Buchstabens fest. Wenn Ihr Design in mehreren Modi ausgeführt werden muss, unterstützen einige CSS-Eigenschaften dies. Sie können sie als Alternative zu den Standardeigenschaften verwenden: inset-blockund inset-inlinezum Positionieren block-sizesowie inline-sizefür die Breite / Höhe border-blockund border-inlinezu den Rändern und ähnliche Eigenschaften zum Einrücken.

Ästhetik

CSS-Übergänge interpolieren einen Wert reibungslos, wenn er sich ändert, sei es aufgrund eines Typeffekts :hoveroder beispielsweise einer aus JavaScript hinzugefügten Klasse. CSS- Animationen sind ähnlich, spielen jedoch vordefinierte Animationen automatisch ab. Beide können eine Reihe verschiedener "Glätte" -Funktionen anwenden .

border-radiusrundet die Ecken des Behälters ab. Alle Ecken können unterschiedlich groß sein und auch rund oder elliptisch. Die Kurve gilt auch für den Rand, den Hintergrund und alle Schatten des Rechtecks.

Schatten von Containern können für den offensichtlichen Effekt der Erzeugung von Schatten verwendet werden. Sie können auch mehrere Schatten und Schatten insetfür verschiedene intelligente Effekte verwenden.

text-shadowtut, was es sagt, obwohl Sie auch ein paar Schatten hinzufügen können, um eine Art Textumriss zu erstellen.

transformMit dieser Option können Sie eine beliebige mehrstufige Transformation auf ein Element anwenden, dh skalieren, drehen, kippen, verschieben und / oder eine perspektivische Transformation durchführen, ohne das Layout zu beeinflussen.

filter(anders als IE 6) bietet mehrere spezielle visuelle Filter, die auf ein Element angewendet werden können. Die meisten von ihnen ändern ihre Farbe, aber es gibt auch blur()und drop-shadow()(im Gegensatz dazu box-shadowwird es auf das äußere Element Geist angewendet und nicht auf seinen Behälter).

linear-gradient(). radial-gradient(), neu und weniger unterstützt conic-gradient(), ihre Optionenrepeating-* - Alle von ihnen erstellen Verlaufsbilder und können überall in CSS verwendet werden, wo das Bild erwartet wird, normalerweise wie background-image.

scrollbar-colorÄndert die Farbe der Bildlaufleiste mit dem unangenehmen Nebeneffekt, dass die Bildlaufgeschwindigkeit in aktuellen Browsern erheblich niedriger ist.

background-size: coverundcontain sie skalieren das Hintergrundbild proportional so, dass es entweder groß genug wird, um das Element vollständig abzudecken (selbst wenn es beschnitten ist) oder klein genug, um hinein zu passen (selbst wenn das Element nicht den gesamten Hintergrund abdeckt).

object-fit Ist eine ähnliche Idee, aber für andere Objekte wie <img>. Geeignete object-positionArbeiten wie background-position.

Es ist möglich, mehrere Hintergründe zu verwenden, was besonders für Farbverläufe nützlich ist. Sie können mehrere Farbverläufe, andere Hintergrundbilder und eine Volltonfarbe unten stapeln.

text-decorationwurde bizarrer als zuvor; Jetzt können Sie die Farbe der Linie festlegen und verschiedene Arten von Linien verwenden, einschließlich gestrichelter, gepunkteter und gewellter Linien.

CSS-Zähler können zur willkürlichen Nummerierung beliebiger Elemente verwendet werden und bieten die Möglichkeit, <ol> für einen beliebigen Satz von Elementen zu verwenden.

Mit dem Pseudoelement ::markerkönnen Sie den Markierungscontainer eines Listenelements stilisieren oder sogar vollständig durch einen benutzerdefinierten Zähler ersetzen. Die Browserunterstützung ist unvollständig, verbessert sich jedoch. Ebenso die Regel@counter-styleimplementiert einen völlig neuen Zählerstil (z. B. 1 2 3, i ii iii, ABC usw.), den Sie überall verwenden können, obwohl dies bisher nur von Firefox unterstützt wird.

image-set()Bietet eine Liste möglicher Bilder und ermöglicht es dem Browser, basierend auf der Pixeldichte des Benutzerbildschirms das am besten geeignete auszuwählen.

@font-faceDefiniert eine Schriftart, die von einer externen Quelle heruntergeladen werden kann, obwohl Sie Google Fonts verwenden können .

pointer-events: noneLässt das Element die Maus vollständig ignorieren. Es reagiert nicht auf Anweisungen, und Klicks führen direkt durch das Element darunter.

image-renderingMöglicherweise wird die Bildinterpolationsmethode auf "Nächster Nachbar" geändert, obwohl die Browserunterstützung noch uneinheitlich ist. Möglicherweise müssen Sie auch einige browserspezifische Eigenschaften aktivieren.

clip-pathschneidet ein Element auf eine beliebige Form. Es gibt auch maskeine beliebige Alpha-Maske, aber die Browserunterstützung ist nicht einheitlich, und dies ist im Allgemeinen ein ziemlich kompliziertes Verfahren.

Syntax und so

@supportsErmöglicht das Schreiben von unterschiedlichem CSS-Code, je nachdem, was der Browser unterstützt, obwohl er derzeit bei weitem nicht so nützlich ist wie 2004.

A > Bwählt unmittelbare Kinder aus. A + Bwählt Brüder und Schwestern. A ~ Bwählt unmittelbare (nach Elementen) Brüder und Schwestern aus. Eckige Klammern können eine Reihe von Dingen auswählen, die auf Attributen basieren. Das offensichtlichste ist input[type=checkbox], obwohl mit den entsprechenden Teilen interessante Dinge getan werden können <a href>.

Jetzt gibt es eine ganze Reihe von Pseudoklassen. Viele von ihnen sind für Formelemente: :enabledund :disabled; :checkedund :indeterminate(gilt auch für <option>); :requiredund :optional; :read-writeund :read-only; :in-range/ :out-of-rangeund :valid/:invalid(zur Verwendung mit der clientseitigen HTML5-Formularvalidierung); :focusund :focus-within; und :default(wählt die Standardformularschaltfläche und alle vordefinierten Kontrollkästchen, Optionsfelder und aus <option>').

Für die Anwendung auf bestimmte Elemente innerhalb eines Satzes verwandter Elemente haben :first-child, :last-childsowie :only-child; :first-of-type, :last-of-typeund :only-of-type(wobei "Typ" den Namen des Tags bedeutet); ist :nth-child(), :nth-last-child(), :nth-of-type()und :nth-last-of-type()( für jede der zweiten, dritten und usw. Elemente auszuwählen).

:not()kehrt den Selektor um. :emptyWählt Elemente ohne Kinder und ohne Text aus. :targetWählt das Element aus, zu dem das URL-Fragment gesprungen ist (z. B. wenn die Adressleiste angezeigt wirdindex.html#fooGleichzeitig wird das Element ausgewählt, dessen Kennung gleich ist foo.

::beforeund ::afterjetzt mit zwei Doppelpunkten, um anzuzeigen, dass sie Pseudoelemente erzeugen und nicht nur den Bereich des Selektors definieren, an den sie angehängt sind. ::selectionpasst an, wie der ausgewählte Text angezeigt wird; ::placeholderÄndert, wie der Ersatztext aussehen soll (in Textfeldern).

Medienabfragen erledigen nur eine ganze Reihe von Dingen, sodass sich Ihre Seite je nach Ansicht anpassen kann. Die Medienabfrage prefers-color-schemeinformiert darüber, ob das System des Benutzers in einem hellen oder dunklen Thema installiert ist, sodass Sie es automatisch entsprechend konfigurieren können.

Sie können durchscheinende Farben wie #rrggbbaaoder schreiben#rgbasowie die Funktionen rgba()und hsla().

Winkel können als Bruchteile eines Vollkreises mit beschrieben werden turn. Natürlich sind degund rad(und grad) auch verfügbar.

Mit CSS-Variablen (offiziell „benutzerdefinierte Eigenschaften“) können Sie benutzerdefinierte benannte Werte festlegen, die überall verwendet werden können. Sie können dies verwenden, um den Umfang der in JavaScript erforderlichen CSS-Manipulation zu reduzieren (z. B. um einen komplexen Teil einer Seite neu zu zeichnen, indem Sie eine CSS-Variable festlegen, anstatt eine Reihe von Eigenschaften manuell festzulegen) oder um eine generische Komponente zu erstellen, die auf von der übergeordneten Komponente festgelegte Variablen reagiert.

calc()berechnet einen beliebigen Ausdruck und aktualisiert ihn automatisch (obwohl die Notwendigkeit solcher Berechnungen teilweise entfälltbox-sizing)

vw, vh, vminUnd,vmax können Sie die Länge als Prozentsatz der Breite oder Höhe des Ansichtsfensters angeben, oder je nachdem , welche größer / kleiner.

Fuh! Ich bin sicher, dass ich viel vergessen habe, und meine Kollegen werden die Liste in den Kommentaren ergänzen. Jetzt kann ich mich der Anzeige von MDN entziehen und zum letzten, lustigen Teil des Artikels gehen.

Modernes Raster von Thumbnails

Am Ende kommen wir zu der endgültigen und objektiv korrekten Methode zum Erstellen eines Miniaturbildrasters: Verwenden des CSS-Rasters . Die richtige Wahl kann auch dann verstanden werden, wenn der Name ein Raster enthält. Die modernen CSS-Funktionen sind ziemlich gut: Sie lassen Sie sagen, was Sie wollen - und es funktioniert so, wie Sie es gesagt haben, anstatt obskure Voodoo-Zaubersprüche zu verwenden.

Und so einfach ist das:

.thumbnail-grid {
    display: grid;
    grid: auto-flow / repeat(auto-fit, minmax(250px, 1fr));
}

Erledigt! Es gibt uns ein Gitter . Und Sie haben eine Vielzahl anderer Optionen, um mit ihnen zu spielen, genau wie bei Flexbox, aber das ist die Hauptidee. Sie müssen die Elemente nicht einmal selbst stylen. Der größte Teil der Layoutarbeit wird im Container erledigt.

Die Shorthand-Eigenschaft gridsieht ein wenig einschüchternd aus, aber nur, weil sie flexibel ist. Er sagt: Füllen Sie das Raster zeilenweise aus und erzeugen Sie so viele Zeilen wie nötig. Machen Sie so viele 250px-Spalten wie möglich und teilen Sie den verbleibenden Abstand gleichmäßig auf.

CSS-Raster eignen sich auch zum Platzieren von <dl>, was in der Vergangenheit große Kopfschmerzen bereitet hat: Ein <dl> enthält eine beliebige Anzahl von <dt>, gefolgt von einer beliebigen Anzahl von <dd> (einschließlich Null). Bisher war der einzige Weg, es zu stylen,float, was eine feste Breite bedeutete. Jetzt können Sie einfach <dt> in der ersten Spalte und <dd> in der zweiten Spalte angeben, und das CSS-Raster kümmert sich um den Rest.

Wie sieht es auf einer echten Seite aus? Diese Geschichte mit der Seitenleiste? Sehen Sie, wie einfach es ist:

body {
    display: grid;
    grid-template:
        "header         header          header"
        "left-sidebar   main-content    right-sidebar"
        "footer         footer          footer"
        / 1fr           6fr             1fr
    ;
}
body > header {
    grid-area: header;
}
#left-sidebar {
    grid-area: left-sidebar;
}
/* ... etc ... */

Erledigt. Einfach. Es spielt auch keine Rolle, in welcher Reihenfolge die Details im Markup aufgelistet werden sollen.

Andererseits

Das Web ist immer noch eine Katastrophe. Viele wissen nicht einmal, dass Flexbox und Grid mittlerweile fast universell unterstützt werden . Aber angesichts der Zeit, die es gedauert hat, von einer frühen Spezifikation zu einer umfassenden Implementierung zu gelangen, kann ich ihnen keine Vorwürfe machen. Erst gestern habe ich eine brandneue kleine Site gesehen, die hauptsächlich aus einer riesigen Liste von "Thumbnails" in verschiedenen Breiten bestand und Floats verwendete! Nicht einmal inline-block! Ich weiß nicht, wer ihnen diese kniffligen Hacks beigebracht hat und warum er kein Wort über Flexbox gesagt hat.

Aber viel schlimmer ist, dass ich immer noch regelmäßig auf Websites stoße, die das gesamte Layout mit JavaScript erstellen . Wenn Sie den uMatrix-Skriptblocker verwendenIhre erste Erfahrung ist eine Reihe von Texten, die sich mit einer anderen Reihe von Texten überschneiden. Ist das wirklich ein Schritt zurück? Wie ist es, dass der Titel und die Seitenleiste nur dann korrekt positioniert sind, wenn das Skript ausgeführt wird? Dies ist nicht so, als würde man eine Seite ohne CSS laden - in einfachem HTML kann sich standardmäßig nichts überlappen! Sie müssen dies absichtlich angeben!

Und dann ist da noch das mobile Web, das sich trotz aller guten Absichten als im Wesentlichen schlechte Idee herausstellte. Die Idee war, CSS-Medienabfragen auf dem Bildschirm eines Mobiltelefons zu verwenden, die einer regulären Site entsprechen. Stattdessen haben die meisten großen Sites vollständig separate mobile Versionen. Dies bedeutet, dass entweder die mobile Site nicht über eine Reihe wichtiger Funktionen verfügt und Sie ungeschickt auf Ihrem Telefon navigieren müssen, oder dass die Vollversion der Site voller Mist ist, den niemand wirklich braucht.

Auch in Versionen von Google Text & Tabellen / etc. Für Android beispielsweise nur 5% der Funktionen der Webversionen. Ich weiß nicht, was ich damit anfangen soll.

Unerfüllte Optionen für die Zukunft

Ich weiß nicht, wie sich CSS weiterentwickeln wird, insbesondere jetzt, wo Flexbox und Grid alle unsere Probleme gelöst haben. Mir ist vage bewusst, dass derzeit an einer umfassenderen mathematischen Unterstützung gearbeitet wird und möglicherweise einige Funktionen zum Ändern von Farben wie in Sass. Es gibt eine Painting-API , mit der Sie mithilfe von JavaScript mithilfe der Canvas-API im laufenden Betrieb einen Hintergrund generieren können. Das ist ... ziemlich cool. Anscheinend musste ich in der Spezifikation bereits attr()den Wert einer Eigenschaft berechnen. Dies scheint cool zu sein und ermöglicht es Ihnen möglicherweise sogar, HTML-Tabellen vollständig in CSS zu implementieren, aber Sie können dasselbe mit Variablen tun. Ich meine "benutzerdefinierte Eigenschaften" (offizieller Name). Ich beschäftige mich mehr :is()mit übereinstimmenden Auswahllisten und Subgridfür verschachtelte Subnetze.

Es ist viel einfacher, Dinge aufzulisten, die in den Plänen enthalten waren, aber noch nicht implementiert wurden.

display: run-in ist seit Version 2 (bereits im Jahr 98) Teil von CSS, wird jedoch meist nicht unterstützt. Die Idee ist, dass ein Block in den nächsten eingefügt wird. Zum Beispiel dieser Code:
```
<h2 style="display: run-in;">Title</h2>
<p>Paragraph</p>
<p>Paragraph</p>
```
Entspricht einer solchen Ausgabe:

Titel Absatz
Absatz

Und, hmm, ich fange an zu verstehen, warum dies nicht unterstützt wird. Früher existierte es in WebKit, aber es war wahrscheinlich so funktionsunfähig, dass es vor sechs Jahren entfernt wurde.
« » 2000-, , . , ( ), . , , , , .

, Chrome , .
, CSS , CSS -. 2 :

… , .

, . . Firefox userContent.css URL- , .

, , Stylish, , (, - , . Stylus).

(, ) . :checked. :

<label><input type="checkbox"> Description of what this does</label>

… CSS <label>, . () jQuery :has():

/* checkbox label turns bold when checked */
label:has(input:checked) {
    font-weight: bold;
}

CSS 3, , , , . , , , , “”. :

label:subject input:checked {
    font-weight: bold;
}

!:

!label input:checked {
    font-weight: bold;
}

, , , , … :has()! , JavaScript, , , . , , .

<style scoped> , CSS <style> . , (, ) CSS . , , DOM .
, -, , HTML… , JavaScript , , . JS. .
<blink> <marquee>. RIP. , CSS-.

Du bist immer noch hier? Es ist jetzt alles vorbei. Zeit nach Hause zu gehen.

Und vielleicht leisten Sie Ihren Beitrag zur Konfrontation mit der Blink-Monokultur mit Firefox , auch am Telefon , wenn Sie aus irgendeinem Grund kein iPhone verwenden, was andere Browser-Engines generell verbietet. Es ist viel schlimmer als alles, was Microsoft jemals getan hat, aber wir akzeptieren es einfach aus irgendeinem Grund ...

Altes und neues CSS. Webdesign-Verlauf