Vor ein paar Tagen hat Chris getwittert
Wenn wir Pseudoelemente stapeln könnten (z.B.
::after::after), könnten wir eine ganze Website ohne HTML außer . bauen. Wahrscheinlich ist es gut, dass wir das nicht können.
Als Reaktion darauf erstellte ich diese kurze Demo (in Firefox oder Opera anzeigen), die veranschaulicht, dass man technisch gesehen gar kein HTML benötigt, um CSS zu verwenden.
Da diese Demo offenbar einige Verwirrung bei Tweeps verursachte, beschloss ich, einen Artikel darüber zu schreiben. Grundsätzlich tut diese magische Demo nur zwei knifflige kleine Tricks, von denen die meisten Leute anscheinend nichts wissen.
Einige HTML-Elemente sind implizit
Die öffnenden und schließenden Tags <html>, <head> und <body> sind in HTML nicht erforderlich. Das folgende Dokument ist perfekt gültig und konform
<!DOCTYPE html>
<title>Example</title>Der Kürze halber verwendet dieses Codebeispiel den HTML5 DOCTYPE, aber lassen Sie sich davon nicht verwirren - wenn Sie zum HTML 4.01 DOCTYPE wechseln würden, würde das Dokument immer noch validieren. Offensichtlich hat XHTML eine viel strengere Syntax, die das Weglassen optionaler öffnender und/oder schließender Tags nicht zulässt. Aber es ist fast 2011, wer benutzt denn noch XHTML?
Wenn ein Browser unser Beispiel-Dokument rendert, bemerkt er, dass die Elemente , und im Quellcode fehlen und – warten Sie darauf – sie automatisch generiert. Sie können dies bestätigen, indem Sie die Demoseite öffnen und den generierten Quellcode mit Firebug, dem Web Inspector oder Opera Dragonfly inspizieren.
Da diese Elemente implizit sind, können sie auch über CSS gestylt werden, unabhängig davon, ob sie im Quellcode vorkommen oder nicht. Betrachten Sie das folgende Beispiel
<!DOCTYPE html>
<title>Example</title>
<style>
html {
background: red;
}
body {
background: blue;
margin: 0 auto;
width: 30em;
}
</style>Auch wenn im HTML-Quellcode keine Rede von den Elementen <html> und <body> ist, können wir sie trotzdem stylen, da Browser sie automatisch generieren.
Im Grunde ist dies der erste Trick, den ich verwendet habe; ich habe ihn nur noch einen Schritt weiter getrieben. Ich habe mir nicht die Mühe gemacht, einen DOCTYPE anzugeben, geschweige denn einen <title>, und habe einfach gar kein HTML verwendet. Tun Sie das für eine echte Website niemals. Aufgrund des fehlenden DOCTYPE wird das Dokument im Quirks-Modus anstelle des Standardsmodus gerendert. Es versteht sich von selbst, dass das Dokument auch nicht validiert.
Selbst mit einem komplett leeren HTML-Dokument generieren Browser immer noch automatisch die impliziten HTML-Elemente.
Interessante Nebenbemerkung: Es ist auch möglich, Der Link: HTTP-Header.
RFC 5988 definiert den Link HTTP Header, der es Ihnen ermöglicht, <link> Elemente über HTTP-Header zu senden, anstatt sie in das HTML aufzunehmen. Um Ihnen ein Beispiel zu geben, können Sie ein Dokument mit dem folgenden HTTP-Header bedienen
Link: <some-document.html>;rel=prefetch...was die gleiche Wirkung hätte wie das Einfügen dieses in Ihr HTML
<link href="some-document.html" rel="prefetch">Ebenso macht RFC 5988 es möglich, Stylesheets in einem HTML-Dokument mithilfe von nichts anderem als einem HTTP-Header einzubinden
Link: <magic.css>;rel=stylesheetWas dem entspricht...
<link href="magic.css" rel="stylesheet">Nutzung
Wenn Sie also zu Hause damit herumspielen möchten, machen Sie Ihre Demoseite zu PHP und setzen Sie den Header ganz oben auf der Seite
<?php header('Link: <demo.css>;rel=stylesheet'); ?>In dieser Demo wurde der Inhalt mithilfe von Pseudoelementen im CSS in die Seite eingefügt
html {
background: #666;
padding: 1em;
}
body {
border: 5px dashed #eee;
color: #fff;
font: 3em/1.5 sans-serif;
padding: 1em;
width: 30em;
margin: 0 auto;
}
body::after {
content: 'O HAI! Have a look at my source code :)'; /* This needs to be on the ::after (and not just on `body`) for it to work in Firefox 3.6.x. */
}Nun, das ist die Theorie. In der Praxis implementieren nicht viele Browser den Link Header. Zum Zeitpunkt des Schreibens unterstützen nur Opera und Firefox dieses kleine Juwel.
Wenn Sie daran interessiert sind, wie sich die Browserunterstützung für diese Funktion im Laufe der Zeit verbessern wird, können Sie die Fehlerberichte für WebKit (Chromium hat separate Fehler-Tickets für die CSS und die allgemeine Variante) und Internet Explorer abonnieren.
Haftungsausschluss
Wie erwähnt, sind diese Techniken lustige Tricks, und es ist definitiv gut zu wissen, dass sie existieren. Es wäre jedoch keine gute Idee, diese in der Praxis anzuwenden. Der „Hack“ ohne HTML ist allerhand böse, und kein Webentwickler würde ernsthaft in Erwägung ziehen, dies für eine echte Website zu verwenden.
Der Link HTTP-Header ist wesentlich interessanter. Der einzige Grund, warum dies noch nicht wirklich genutzt werden kann, ist die mangelnde Browserunterstützung. Vielleicht eines Tages...
Ein Lob an Anne van Kesteren dafür, dass er mir 2005 den Link Header beigebracht hat :)
Ich werde meine gesamte Website so erstellen!!!!
nur ein Scherz.
lol Das war ein lustiger und interessanter Beitrag!
Warum nicht?
Wenn diese Art der Website-Erstellung alle Positions- und Formatierungsfunktionen unterstützen würde, würde ich darüber nachdenken, einige kleine Websites damit zu erstellen.
Das Problem ist, dass man nur HTML, Head und Body stylen kann. Keine anderen Elemente werden automatisch generiert.
Das ist wirklich beeindruckend !!!!!
Vielen Dank fürs Teilen
Wir *können* Pseudoelemente stapeln, aber es wird noch von keinem Browser unterstützt :( http://www.w3.org/TR/css3-content/#inserting0
Sie haben Recht, ich habe Chris' ursprüngliche Frage irgendwie ignoriert. Glücklicherweise sind andere Leute wie Sie bereit, dem armen Mann zu antworten ;)
Ah, Necolas war schneller als ich :)
Nun, technisch gesehen können wir das nicht, aber es gibt einen Vorschlag, so etwas zu erlauben
Gute Sache! Nicht, dass ich es verwenden würde, aber trotzdem interessant!
Sie sind ein Genie ;) Großartig.
Wirklich erstaunlich! Wenn wir diese Pseudoklassen stapeln könnten, wäre ich der Erste, der eine PHP-Bibliothek erstellen würde, die uns erlaubt, solche Strukturen zu erstellen! ;]
Ich habe einige neue Dinge gelernt, wie das Stylen für das Titel-Tag möglich ist. Das werde ich zuerst ausprobieren, bevor ich den Rest ausprobiere. ;)
Ich denke, dies ist ein schöner Anwendungsfall mit vor/nach
http://matthamm.com/box-shadow-curl.html
Cheers.
Hier ist eine leicht abgewandelte Version desselben Effekts: http://jsfiddle.net/simurai/FrspS/
Gut gemacht, Mathias!
Ich denke, es wäre nützlich, den Stil in Headern zu verlinken, wenn alle Browser das implementiert hätten.
Ich habe jedoch herausgefunden, dass FFX den CSS-Download beginnt, wenn der HTML-Download abgeschlossen ist. Das ist schlecht für die Leistung.
Ja, es wäre großartig, wenn der Link-Header browserübergreifend besser unterstützt würde. Dies würde viele coole Sachen ermöglichen, z. B. Autodiscovery von Feeds auf Nicht-HTML-Dokumenten – denken Sie an Bilder oder reine Textdateien!
Interessant, dass Firefox den CSS-Download erst startet, nachdem der HTML-Download abgeschlossen ist. Würden Sie das als Fehler melden?
Beachten Sie, dass die Implementierung von Link in Firefox nicht vollständig ist. Meinen Tests zufolge scheint es nur für rel=prefetch und rel=stylesheet zu funktionieren. Dinge wie rel=alternate (für Feeds) lösen noch keine Autodiscovery von Feeds aus: https://bugzilla.mozilla.org/show_bug.cgi?id=498117 (Dies funktioniert in Opera einwandfrei.)
Coole Sache, sehr interessant
Könnte eine potenzielle Anwendung des
LINK-Headers darin bestehen, im Wesentlichen einen bedingten Stylesheet zu verlinken? Dort könnten Sie Stile nur für FF & Opera angeben.Vielleicht nicht so nützlich wie bedingte Stylesheets für IE, aber immer noch ein faszinierendes Konzept.
Bitte tun Sie das niemals.
Sicher, was Sie vorschlagen, würde *heute* funktionieren, aber sobald WebKit und/oder IE den Link-Header implementieren, werden sie auch Ihre Firefox/Opera-spezifischen Stylesheets erhalten. So viel zu zukunftssicherem Code :)
Außerdem, hatten Sie jemals das Bedürfnis nach einem Firefox/Opera-spezifischen Stylesheet?
Bedeutet das das Ende von HTML?
HTML0
Was zum?
„Aber es ist fast 2011, wer benutzt denn noch XHTML?“
Haha! Ich liebe es!
wenn nur…
Das ist ziemlich cool. Könnte man dies als Fallback für Flash-Objekte anwenden, die für Agenten wie iPads usw. nicht geladen werden?
haha Flash.
Nette Masche, aber ein Nachteil von generiertem Inhalt ist, dass es schwierig sein kann, Probleme damit zu debuggen, da es nicht Teil des DOM ist.
Nur eine Frage der sich verbessernden Debugging-Tools. Der Web Inspector zeigt Pseudoelemente an und kann sie jetzt auch ändern.
Hahaha, als ich zum ersten Mal den Titel Ihres Artikels sah, dachte ich: „WAS ??? WIE ??? UNMÖGLICH ???“ – Lustiger und interessanter Artikel! :D
PS Ich mag das neue Design von CSS-Tricks, es macht Lust, hier zu bleiben und alles zu lesen, was ich sehe. :O
Es passiert viel hinter den Kulissen des Webs, und das ist eines davon.
Gute Masche.
Beeindruckend. Einfach, beeindruckend!
Während dieser Beitrag eher leicht genommen werden soll und keine empfohlene Vorgehensweise für das Design darstellt, ist er sehr hilfreich, um mit der Macht der Kontrolle zu experimentieren, die man mit CSS hat. Es kann ziemlich überraschend sein.
Ich war tatsächlich schon in Situationen, in denen eine Seite einen neuen Stil oder ein neues Design benötigte, aber ich keinen Zugriff auf das HTML hatte, da es dynamisch aus XSL und XML generiert wurde, die an einen globalen Server gebunden waren und mehrere Websites versorgten. Aufgrund solcher Einschränkungen wird eine erweiterte Kontrolle und Auswahl von Elementen mit CSS tatsächlich zu einem sehr nützlichen Werkzeug.
HA! Interessant… Danke! Das macht Lust zum Spielen…
Großartig…
Es ist 2011. Jeder sollte XHTML verwenden.
Was ist mit den anderen Browsern, wenn diese Technik für sie nicht nützlich ist?
Wie Bob sagte, jeder sollte jetzt XHTML verwenden. Ich weiß nicht, wie Sie auf die Idee kommen, XHTML nicht zu empfehlen. Schreiben Sie noch in HTML 4.01, lieber Autor?
Es ist das goldene Zeitalter von HTML5. Wir sollten es annehmen.
übrigens, ist das eine Art unangemessene Nutzung von CSS??
so wie Sie sagten in diesen Artikeln
danke.
XHTML nimmt Ihnen Ihre Freiheiten!
Sie wissen schon, dass nach XHTML etwas Neues in unsere Welt gekommen ist, oder?
@Toufik, HTML5 ist noch ein Entwurf und solange es nicht von Browsern unterstützt wird, ist es nicht sinnvoll zu verwenden. HTML5 ist im Moment nur ein lauter Slogan.
@Seutje, wenn mit Freiheit Tagessuppe gemeint ist, bin ich froh, dass XHTML sie wegnimmt.
@marines: Ich könnte das als ernsthaftes Argument nehmen, aber Ihre persönliche Seite, die mein IE im Quirks-Modus darstellt, lässt mich vermuten, dass Sie die Webentwicklung nicht wirklich ernst nehmen
versuchen Sie, Ihre Tags richtig zu schließen, Ihre Attribute zu zitieren und all den anderen Kram, wissen Sie ... wie XHTML es verlangt
andererseits würde dieses Durcheinander auch nicht zu HTML5 passen
keine Sorge, ich werde nicht auf die nachgestellten Kommafehler bei JS eingehen ♥
Es wurde vor ein paar Jahren gemacht und ist nicht wirklich mein Code, aber Sie haben Recht. ;)
Ich habe dasselbe gedacht.
Ja, HTML5 ist schön. Ich freue mich darauf. Wir sollten damit experimentieren und üben. Wir sollten uns nicht auf einen Entwurf verlassen, der noch nicht vollständig browserübergreifend unterstützt wird. Es ist schon schwierig genug, ältere IE-Versionen dazu zu bringen, keine Probleme zu machen, und dort kennen wir zumindest die Einschränkungen. Bei HTML5 ist es Glückssache, was Ihr Benutzer unterstützt hat.
XHTML ist die strikte Einhaltung eines Standards. Das ist eine gute Sache.
HTML5 ist ein Entwurf, weil Webdesigner bessere Optionen verlangten und weil Browser mit den bereits von uns verwendeten Methoden Schritt halten mussten. Wir müssen HTML5 jetzt in Bereichen verwenden, in denen es angebracht ist (d.h. es zerstört keine Funktionalität), weil die Nutzung des neuesten und besten verfügbaren Werkzeugs die Entwicklung von Browsern und neuen Spezifikationen beschleunigt. Wenn wir alle warten, bis es veröffentlicht und von jedem Browser unterstützt wird, verlangsamen wir die Verbesserung des Webs und behindern uns selbst.
An alle, die die Wunderbarkeit von XHTML preisen: Wie viele von Ihnen liefern Ihre Seiten mit dem richtigen MIME-Typ aus?
Ich bin sicher, einige von Ihnen wissen das, aber ich bin mir auch sicher, dass viele von Ihnen das nicht tun: XHTML ist nicht nur eine Frage der Verwendung von Kleinbuchstaben, selbstschließenden Tags und eines ausführlichen Doctypes. Die meiste "XHTML" im Web ist schlecht formatiert und/oder ungültig und wird von Browsern tatsächlich als übermäßig fehlerkorrigiertes HTML gerendert.
@brian: Ich hoffe, Sie verwenden dann nicht CSS2.1, da es in keinem einzelnen Browser vollständig implementiert ist und all das usw.
Außerdem sollten Sie sich http://hixie.ch/advocacy/xhtml ansehen
Wie ist das ein Argument für XHTML? Man könnte dasselbe über HTML 4.01 sagen.
Was frustrierend ist, ist, dass wir ohne IE alle echtes XHTML als application/xhtml+xml hätten ausliefern können. Ich habe einen Wutausbruch darüber auf Reddit hier
Das ist wirklich großartig!
Schön, aber es hat nichts mit semantisch strukturierten Inhalten zu tun.
Was?
Haha, wirklich nette Idee. =)
Wenn das unser Experimentieren ist, stellen Sie sich nur vor, was die Gurus des W3C sich ausgedacht haben.
Ausgezeichneter Artikel mit tollen Beispielen.
Das habe ich schon vor Ewigkeiten gemacht, zu schade, dass ich keinen Blog habe
Das ist so cool!
Was könnten wir noch zum Spaß ausradieren?
Man könnte die Notwendigkeit eines Stylesheets und des browsergenerierten Markup eliminieren, indem man all seinen Inhalt in PDFs liefert
Schön!
Das ist wirklich großartig!
Das ist ziemlich großartig. Wenn mich jemand gefragt hätte, hätte ich wahrscheinlich gesagt, dass es möglich ist, aber ich wusste nie, dass man Inhalte über CSS posten kann. Man lernt jeden Tag etwas Neues über CSS ;-)
Nette Masche. Ziemlich informativ.
Sehr interessanter Artikel – ich werde wahrscheinlich keine Kundenwebsites so codieren, aber vielleicht spiele ich ein bisschen auf einer meiner eigenen Testseiten damit herum. Danke für die Einblicke.
Hallo Chris
Ich mag Ihre Arbeit und Artikel, aber dieses Thema ist für niemanden nützlich. Die Dinge, die man nicht verwenden kann, sollten nicht so präsentiert werden, dass Anfänger durch Artikel wie diesen verwirrt und verloren gehen können.
Ich sage Ihnen das, weil einer unserer neuen Mitarbeiter, dem ich empfohlen habe, Ihre Seite zu besuchen und neue Tipps und Tricks zu lernen, von diesem Artikel verwirrt war.
Dies ist unsere Community und wir sollten die volle Verantwortung übernehmen, Programmierer in die richtige Richtung zu leiten, einschließlich Anfänger.
Mathias hat einen ganzen Abschnitt im Artikel mit dem Titel „Disclaimer“ aufgenommen. Bitte lesen Sie diesen.
Chris
Seien Sie ehrlich und sagen Sie mir, WIE oft man einen Disclaimer liest.
Wie auch immer, nochmals, ich mag Ihre Arbeit, aber ich habe immer noch das Gefühl, dass dieser Beitrag für Leute, die neu sind, irreführend sein kann.
Seien Sie ehrlich, wie oft ist es die Schuld des Autors, dass jemand den Haftungsausschluss nicht liest?
Wenn Sie Mitarbeiter hierher schicken, um zu lernen, ist das großartig. Aber wenn Sie sich um so etwas Sorgen machen, sollten Sie vielleicht bestimmte Artikel für sie auswählen. Oder ein *echtes* Trainingsprogramm absolvieren.
lol, das ist lustig. hätte nicht erwartet, das zu sehen. das wäre erstaunlich, wenn es funktionieren würde. aber wie würde Google Schlüsselwörter auf der Website indizieren? lol wahrscheinlich schlecht für SEO, wenn es funktionieren würde.
Das hat Spaß gemacht! Trotzdem hat Chris Recht: Verwenden Sie das nicht für echte Websites… ganz zu schweigen von SEO und so :)
Gurvinder, wenn Chris das nicht gepostet hätte, hätte ich nie gewusst, dass es existiert. Vielleicht könnte jemand diese Idee in eine funktionierende umwandeln. Dass HTML, CSS und JavaScript angezeigt werden, ist gut für andere Leute, um zu lernen, wie etwas gemacht wurde. Aber für Websites, die 100 % sicher sein wollen, wenn die Felddaten tatsächlich versteckt wären, stellen Sie sich vor, wie viel mehr Sicherheit bestehen kann, wenn alle HTML-Felder durch die Quelle versteckt werden.
Ich stimme dem Sicherheitsaspekt zu und werde gespannt darauf warten, ihn zu implementieren, aber es ist auch eine bekannte Tatsache, dass er noch nicht browserübergreifend implementiert ist und, wie ich bereits erwähnt habe, jungen/neuen Programmierern NICHT helfen wird.
Wie würde diese Technik überhaupt die Sicherheit verbessern? Alles wird immer noch unverschlüsselt über die Leitung gesendet. Es hat nichts mit Sicherheit zu tun.
was sind alle Ihre Aspekte von HTML5
Toller Artikel! Es wäre interessant, eine ganze Website auf diese Weise zu erstellen.
Süß – Neue Tricks rocken!! Hat es geliebt :-)
lol, das einzige Problem ist jedoch, dass dies nur auf einer Seite möglich ist.
Sie haben wieder großartige Arbeit geleistet, Chris!
-warte auf ein weiteres Screencast!
Ich habe ein wenig Angst, das zu implementieren. Denn was wird Google tun, wenn es solche Seiten sieht, wird es sie ranken? Wenn nicht, bin ich nicht dafür ... aber bisher ist das ein echtes Abenteuer ...
Das ist wirklich beeindruckend !!!!! aber wie findet man diese Website, wenn Google ihren Inhalt nicht sehen kann?
Ich glaube, das wäre wirklich eine Revolution
Schön! Danke fürs Teilen!
Wäre es möglich, das :after-Pseudo-Element zu verwenden, um HTML wie dieses einzufügen?
<a href='domain.com' rel="nofollow">Das ist ein von CSS generierter Link</a>Jhakkaas!