Leser Kartlos hat mich auf einen interessanten Artikel des großartigen Mr. Snook von vor ein paar Jahren aufmerksam gemacht. Ich glaube, ich hatte ihn vorher noch nicht gesehen, und es ist ein echtes „CSS-Trick“, also dachte ich, ich teile es.
Die Idee ist, dass Sie Unicode-Zeichen (lies: hübsche Symbole) für Klassennamen in Ihrem HTML verwenden können und sogar CSS-Selektoren mit denselben Zeichen schreiben können.
<div class="♫">
A.A. Bondy
<em>I Can See The Pines Are Dancing</em>
</div>.♫ {
display: block;
background: #eee;
padding: 5px;
}Ziemlich cool, oder? Ich würde mein Beispiel oben als perfekt semantisch bezeichnen, da der Div mit dem Noten-Klassennamen einen Musiker und ein Lied markiert. Möglicherweise sogar noch semantischer, da eine Musiknote Musik symbolisiert, mehr als jedes englische Wort.
Ich habe eine super einfache Demo-Seite zusammengestellt, die zeigt, wie es funktioniert. Oh, und ja-es-funktioniert-in-IE6™ & ja-es-ist-valide™
Aber…
Eine lustige Sache? Betrachten Sie den Quellcode dieser Seite. Ich verwende PHP-Includes für die Kopf- und Fußzeilen aller meiner Demos, und aufgrund der Zeichenkodierung (?) dieser Seite wird das PHP nicht ausgeführt, es bleibt einfach als Text bestehen.
Das ist nicht richtig.
Coda warnt Sie zuerst.
Seltsam, oder? Wenn Sie wissen, wie das auf beide Arten funktionieren könnte, lassen Sie es mich wissen.
Andere Verwendungen
Jonathan präsentierte (in seinem ursprünglichen Artikel) die Idee, die Ecken einer Box anzusprechen.
<div class="□">
<div class="┌">
<div class="┐">
<div class="└">
<div class="┘">
content
</div>
</div>
</div>
</div>Erinnern Sie sich, vor ein paar Jahren haben die meisten von uns abgerundete Ecken mit verschachtelten Divs und Bildern wie diesen verwendet! Die Eckensymbole sind clever, aber ich konnte mir vorstellen, dass der<div class="□">heute für „Container“- oder „Box“-Stilklassen verwendet wird, oder vielleicht am besten von allen, der Clearfix.
Ich habe einen kleinen Code-Clip davon auf Forrst gepostet (tut mir leid, ich weiß, die meisten Leute haben dort noch keine Konten) und ein Typ namens Aaron hatte eine lustige Idee. Rückwärts geschriebenes zu verwenden, um zu nerven!id='ɹǝpɐǝɥ', id='ɹǝddɐɹʍ', id='ɹǝʇooɟ'
Das ist lustig!
Sehr interessant und eine ziemlich semantische Art, Klassennamen zu verwenden.
Chris, das ist ein wirklich netter Trick. Obwohl jeder Programmierknochen in meinem Körper schreit „Benutzen Sie das nicht in der Produktion“ hehe.
Eine Sache bezüglich PHP, ich sehe keine Tags im Quellcode der Demo-Seite – http://pastebin.com/1hG0Xdzu
Coole Idee! Ich sehe keine Probleme mit PHP-Tags und ich benutze immer UTF-8.
Zum Beispiel:
http://hatboats.se/unicode/
http://hatboats.se/unicode/index.phps
haha großartig! Ich werde es vielleicht ausprobieren und ein Herz für meine Link-Lieblingssektion auf meinem Blog verwenden lol
Interessant, gefällt mir definitiv die Idee, „□“ für Container zu verwenden.
Pfeile, ⇇ könnten für Floats funktionieren, ⅓, ⅔ usw. könnten auch für Grids nützlich sein
Die Verwendung von ⇇ für einen Float ist vergleichbar mit der Verwendung von „floatleft“ als Klassenname…
Das ist sehr cool, mir gefällt die Idee mit der Ecke der Box. Ich frage mich, ob Leute wie Tim Berners-Lee daran gedacht haben, als er vom semantischen Web sprach – Musiknoten für DRM-verschlüsselte Dateien.
Als Programmierer, der sich seit einiger Zeit mit dem semantischen Web beschäftigt, kann ich ziemlich zuversichtlich sagen, dass UTF-8-Klassennamen – obwohl cool – nicht genau das sind, was Timbl mit dem semantischen Web meint.
Es wäre cool, ♠ ♣ ♥ ♦ auf einer Casino-/Online-Wettseite zu verwenden. Man muss nur jemanden finden, der eine will!
obwohl das wahrscheinlich nichts ist, was ich jeden Tag benutzen würde, hat es mir gerade den Tag versüßt. zu lustig, ich wäre nie auf die Idee gekommen, solche Zeichen überhaupt in Betracht zu ziehen.
Manche Dinge sind geradezu traurig, und andere, die nur knapp daran vorbeigehen, sind geradezu cool!
Ich bin mir noch nicht sicher, wo das liegt lol
Chris,
Man sollte also ⋆ für seine Hauptklasse verwenden.
Gefällt mir.
Schauen Sie sich ein paar Sterne an… (⋆)
http://www.fileformat.info/info/unicode/char/search.htm?q=star&preview=entity
Ich denke, jeder sollte immer UTF-8 verwenden. Es gibt viel mehr Vorteile, als zum Beispiel ISO-8859-1 zu verwenden.
Ich ♥ es. Es ist aufregend, wie die gesamte Kommunikation jetzt symbolischer als alphabetisch wird.
haha…das IST lustig…und ziemlich cool
Danke Chris, für einen lustigen Artikel, der mich von dem gehirnauflösenden Code ablenkt, auf den ich seit 6 Stunden starre! ; )
Das ist wirklich cool. Hätte nie gedacht, dass man so etwas tun könnte? Gibt es abgesehen von der Warnung irgendwelche Probleme?
Die Box-Idee ist wirklich interessant und könnte sehr nützlich sein. Ich vergesse ständig, wie ich bestimmte Klassen benannt habe und es wäre viel einfacher, sich daran zu erinnern, wenn man es mit einem Symbol in Verbindung bringt.
Außerdem wird Ihre Stylesheet dadurch ziemlich abgefahren aussehen!
Ich werde es vielleicht ausprobieren und sehen, wie die Reaktionen darauf sind!
Das ist so ein genialer Trick! Und seltsamerweise stimme ich der semantischen Natur des Notensymbols anstelle von „Musik“ vollkommen zu. Ich würde gerne sehen, wie jemand das in sein Markup einbaut.
Außerdem, hier ist ein Forrst-Einladungscode für 25 Anmeldungen, nur für euch Jungs: tricky (benutzen Sie ihn auf forrst.com/signup)
Das könnte auf jeden Fall viel Spaß machen. Danke für den Tipp und auch danke an @Kyle für den Forrst-Einladungscode!!
Das ist niedlich!
Hier haben Sie eine Unicode-Karte
http://www.atm.ox.ac.uk/user/iwi/charmap.html
Bitte tun Sie das niemals, Leute. Bitte.
Was ist mit Details dazu, warum? Ich hatte offensichtlich meine eigenen Probleme damit in Bezug auf PHP, aber gibt es andere?
Roger, du hast Recht. Es ist nicht wirklich praktisch oder semantisch, nur irgendwie lustig. Ich stimme nicht zu, dass ♫ eine semantischere Art ist, Künstler und Songtitel zu markieren. Wenn Sie tatsächlich eine Partitur markieren würden (irgendwie?), aber nicht die Bezeichnungen, die verwendet werden, um Musikstücke zu identifizieren.
Aber was ist mit dem Paragraphensymbol §? Wäre das eine geeignete Alternative zum Wort Abschnitt?
Ausgezeichneter Beitrag Chris. Ich mag die Verwendung der □-Idee und werde sie wahrscheinlich für Clears verwenden.
Aber ist das nicht vergleichbar mit der Einbeziehung von präsentationalen Klassennamen? Scheint nicht sehr semantisch…
Das traditionelle Argument ist, dass ein Klassenname wie „left“ nicht semantisch ist, weil er präsentational ist. Dieses Ding, das er umhüllt, ist möglicherweise nicht immer auf der „linken“ Seite. Ein besserer Name wäre „sidebar“, da dies den Inhalt besser beschreiben könnte.
Eine Musiknote als Klassenname für einen Div, der Informationen über Musik umschließt, erscheint mir genial semantisch. Was ist daran „präsentational“?
Hm, ich glaube, ich dachte, die Musiknote sei mehr ein visuelles Symbol als eine tatsächliche Beschreibung.
(Ich liebe diese Idee tatsächlich, ich finde nur, dass etwas daran ein wenig seltsam ist.)
„Sidebar“ ist nur geringfügig semantischer als „left“. Sidebar impliziert immer noch Position und visuelle Interpretation des Inhalts, anstatt des tatsächlichen Inhalts. „Sidebar“ sagt mir nichts darüber, was sich in diesem Element befindet, es sagt mir, was es sein soll.
Eine Musiknote als Klassenname für einen Div, der Informationen über Musik umschließt, ist zwar semantisch im Geiste, aber für einen Code-Editor ist sie völlig unzugänglich. Sie beruht auf der Interpretation des Symbols, intellektuell und potenziell auch auditiv, wenn jemand Sehprobleme hat.
Sie entwickeln Websites semantisch für Barrierefreiheit und machen dann die köstliche Ironie, dass die Bearbeitung und das Lesen Ihres Codes selbst nicht für alle zugänglich ist? Es ist kreativ, aber praktisch erscheint es einfach lächerlich, selbst auf der grundlegenden Ebene, wie zum Teufel findet jemand dieses Zeichen auf seiner Tastatur, ohne Copy & Paste zu verwenden.
ziemlich nett… aber dieser PHP-Bug kann ernsthafte Sicherheitsprobleme verursachen, denkst du nicht?
Chris – Ich habe gerade versucht, dieses Zeichen in Coda einzugeben, und hatte überhaupt keine Probleme. Ich habe den Menüpunkt Bearbeiten > Sonderzeichen verwendet, um es einzufügen – aber ich habe Coda so eingestellt, dass es UTF-8-Kodierung verwendet….
Wie ist das ein Trick? Wir Europäer benutzen seit Jahren UTF-8-Strings. Symbole sind originell, aber UTF-8-Strings wie „class=’entête'“ sind ziemlich üblich.
Cooler Trick. Ich benutze Symbole wie !?+~ für kurze, spezielle Klassennamen, wie das Pipe-Zeichen („|“) für vertikale Trennzeichen. Dann escapere ich das Zeichen in CSS („.\|“). Funktioniert auch in JavaScript und in jQuery (aber leider nicht in Dojo).
lol, was zum Hack Klasse=”⧻ഞﶈ”
Weiß jemand, ob das für IDs genauso wie für Klassennamen verwendet werden kann?
Chris – Ich kann es kaum erwarten, bis Sie zurückkommen und einige von Ihnen mit diesem „Trick“ geschriebene Codes in sechs Monaten ändern müssen… Sie werden sich hassen, wenn Sie versuchen, sich an die Tastenkombinationen für ♫ anstelle von ♣ zu erinnern.
Davon abgesehen unterstützen die PHP-Executables kein UTF-16. Speichern Sie Ihr Quelldokument als UTF-8 und es sollte Ihnen gut gehen. Wenn Sie sich den Quellcode Ihrer Demo ansehen, obwohl Sie die Meta-Header auf UTF-8 eingestellt haben, ist das Dokument selbst immer noch tatsächlich in UTF-16.
Ich bin mit Blake. Ein Teil des Engineering-Kompromisses beim Schreiben von Code ist die Wartbarkeit. Nicht-textuelle Namen sind süß und neuartig, aber es ist mir nicht klar, ob sie besser sind.
Einer meiner Dozenten für Software-Engineering behauptete, dass Quellcode (und das würde auch für CSS gelten) ein Medium ist, damit der ursprüngliche Entwickler mit allen zukünftigen Wartungsarbeitern des Codes kommunizieren kann, und dass das Verhalten des Computers bei der Ausführung des Codes ein Nebeneffekt war.
Wenn man FF3.6 verwendet und Quelle anzeigt, sieht man die PHP-Aufrufe anstelle der Ausführung, wie Sie sagten.
Guter Fund übrigens. Eine lustige Art, Ihre Klassennamen aufzupeppen :B
lustig, cool, unbeholfen… alles zur gleichen Zeit… und wir reden über CSS. Wir müssen Nerds sein ;)
Es tut mir leid, aber ich denke nicht, dass das semantisch ist. Ich würde tatsächlich sagen, dass es in diesem Fall weniger semantisch ist als Wörter.
Das Notensymbol könnte für manche Leute tatsächliche Noten darstellen (das verbinde ich selbst mit einem Notensymbol), Musik im Allgemeinen oder einfach Klang.
Ich glaube nicht, dass Semantik und Abstraktion eine so gute Kombination sind. Das ist zum Beispiel der Grund, warum Sie neben Ihrem Zeitungsikone im Menü „Artikel“ geschrieben haben.
Hey Chris, danke, dass du mich im Artikel erwähnt hast.
Für gültige XHTML-Zeichenentitäten empfehle ich allen diese Seite: http://www.digitalmediaminute.com/reference/entity/
Wirklich interessante Sache; Ich habe im ganzen Netz einige Subdomains gesehen, die auch mit einem Zeichen benannt sind =)
Es bleibt dir überlassen, Chris, so außerhalb der Box zu denken. Gut gemacht.
Ich sehe das überhaupt nicht als semantisch an. Ein Paar Achtelnoten kann so viele Dinge repräsentieren. Ein Künstlername? Ein Lied? Ein Künstlername und ein Lied? Ein Album? Ein Rhythmus? Wenn man den Kontext betrachten muss, in dem es verwendet wird, um seine Bedeutung zu finden, ist es nicht semantisch.
Wenn □ eine Box, ein Container oder ein Clearfix bedeuten kann, dann ist es nicht semantisch.
Das Problem bei der Verwendung von Bildern für Semantik ist, dass sie von verschiedenen Menschen unterschiedlich interpretiert werden können. Das Sehen eines □ wird niemandem außer dem Ersteller der Seite Informationen liefern. Sie müssen sich die umgebenden Elemente ansehen, um eine Vorstellung davon zu bekommen, was diese Klasse tun soll. Vergleichen Sie das mit einem Klassennamen wie clearfix – Sie wissen ohne jeden Zweifel, dass diese Klasse ein Clearfix ist.
Cool? Ja. Semantisch? Nein.
Ich stimme hier wieder nicht zu. Ich denke, „clearfix“ ist unglaublich nicht semantisch. Wie hilft das, den Inhalt zu beschreiben, den es enthält? Es hilft absolut nicht, es ist reine präsentationale Korrektur. Beschreiben ohne zu spezifizieren, darum geht es meiner Meinung nach bei Semantik.
Aber Sie haben nichts beschrieben. Sie haben ein Bild verwendet, das für Sie und nur für Sie etwas bedeutet. Wie ist das semantisch?
Weil eine Musiknote eine symbolische Darstellung von Musik ist und symbolische Darstellung = Semantik. Ich bin nicht der einzige Mensch auf der Erde, der das weiß, also ist es nicht „ich und ich allein“. Wenn ich zwei Ordner auf meinem Schreibtisch hätte, einer mit einem Kreuz und der andere mit einer Musiknote, welchen würde ich wohl für meine Noten aufbewahren?
Sie gehen davon aus, dass ich weiß, dass Sie Noten in einem Ordner mit der Bezeichnung achtelnoten aufbewahren.
Ich weiß nichts über Sie. Wenn ich Ihren Schreibtisch sehen und zwei Ordner finden würde, einer mit einem Kreuz und einer mit achtelnoten beschriftet, würde ich Annahmen über Ihren Glauben und Ihren musikalischen Hintergrund treffen. Der Ordner mit dem Kreuz könnte Schriftrollen, Predigttranskripte, Bilder von Mitkirchenbesuchern, Kirchenblätter aus dem Jahr 2000 enthalten. Ich kann mich in Ihrem Büro/Zimmer umsehen und versuchen, genau zu erkennen, was sich in dem Ordner befindet, aber ich weiß nichts über diesen Ordner, bis ich ihn öffne und sehe, was genau Sie in einem Ordner aufbewahren, der mit einem Kreuz beschriftet ist. Für Sie ist es klar, weil Sie genau wissen, was sich im Ordner befindet. Für mich ist es ein Ordner mit einem Bild darauf, und ich muss auf kontextuelle Hinweise achten oder in den Ordner schauen, um genau herauszufinden, was der Ordner enthält.
Ich stimme zu, dass musikalische Notation eine universelle Darstellung von Musik ist, aber ein Paar achtelnoten sagt mir nichts darüber, was Sie in dem Ordner mit den Noten aufbewahren. Es könnten Noten sein, es könnten Papiere sein, die Sie von einem Theoriekurs korrigieren müssen, es könnten Liedtexte sein, die Sie mögen, oder es könnte eine detaillierte Liste der CDs, Kassetten und MP3s enthalten, die Sie besitzen. Ich weiß nicht, was es enthält, bis ich hineinschaue. Generisch weiß ich, dass es etwas mit Musik zu tun hat, aber das ist alles, was ich aus dem Bild weiß. Wenn das Bild semantisch wäre, hätte ich kein Problem, den genauen Inhalt des Ordners zu erkennen.
Sie gehen davon aus, dass jemand weiß, was ein Bild für Sie bedeutet. Damit zwingen Sie den Leser/Wartungsarbeiter, den Inhalt anhand kontextueller Hinweise oder durch Betrachten des Inhalts des Containers zu erraten.
Ich denke, Jeremy hat hier einen wirklich guten Punkt – was die Symbole angeht – aber ich habe das Gefühl, die meisten von Ihnen verpassen völlig den Punkt von Unicode-Klassennamen.
Die Unicode-Zeichenmenge enthält nicht nur coole Symbole; Unicode ist mehrsprachig.
<div class="コンテナ">könnte für einen japanischen Designer/Entwickler in Bezug auf Semantik leichter zu lesen sein.Außerdem, was oakleafs sagte :p
klingt nach Spaß.
…wie hast du das auf dem Kopf stehende Schreiben gemacht? :-)
Ich kenne eine Website, auf der man Text eingeben und ihn gespiegelt zurückbekommen kann, aber wie macht man das selbst?
Eigentlich ist die Idee mit den Ecken ziemlich clever! Ich glaube, wir werden das ab jetzt verwenden!
Ich liebe die Idee mit den Ecken, habe gerade den Link an sechs Leute gemailt! Hahaha, ich kann nicht glauben, wie cool das aussehen wird ;)
Danke dafür, ich kann nicht aufhören zu kichern, wie großartig der Trick ist!
Prost!
Mr.Crazy Chimp
Das ist cool! Ich liebe diese Idee. Funktioniert das für alle Browser?
Es ist nett, aber ich war verwirrt, diese Zeichen mehr zu finden…
Das ist ziemlich cool. Aber wie @Ronald auch sagte, unterstützt es alle wichtigen Browser?
so großartig
Das ist lustig und ungewöhnlich, aber ich halte es für nutzlos.
Das ist lustig, aber IMHO ist ein „Icon“ nicht wirklich semantisch.
Nun ja, ein Notensymbol ist semantischer, wenn man völlig verrückt ist. Tatsächlich ist ein Notensymbol lose mit allem verbunden, was mit Musik zu tun hat. Daher sind Songtexte oder Songtitel viel bessere Klassennamen als ein UTF-Symbol für eine Note. Vielleicht war die Verwendung eines Notensymbols ein schreckliches Beispiel für eine allgemein gute Idee. Aber vielleicht ist es vergleichbar mit einem HTML/CSS-Editor, der Syntax-Hervorhebung verwendet und auch alle Hex-Farbcodes einfärbt. Ein bisschen übertrieben für mich.
Übrigens sollte die schreckliche Box-CSS hoffentlich eines Tages verschwinden, um durch etwas ersetzt zu werden, das mehr präsentationale Dinge wie SVG tut. Entschuldigung Chris – ich bin nicht verrückt und rede mit mir selbst – die Box/Note sollte durch UTF für eine große weiße Elefant ersetzt werden. Gut, um solche Diskussionen anzuregen.
Ich hatte keine Ahnung, dass das möglich ist! Danke Chris.
Wo wir gerade bei semantischen Klassennamen sind, ist es nicht lustig, dass es Kopf, Körper und Fußzeile eines Dokuments gibt und wir eine Seitenleiste nicht „rechten Arm“ oder „linken Arm“ nennen?
Wir lassen tatsächlich eine ganze Reihe von Körperteilen aus. Ha!
scheint, als wären wir zurück im Kindergarten!
versteh mich nicht falsch, die Idee gefällt mir. Auch eine großartige Möglichkeit, Ihre Sitebuilds für den Coder frustrierend zu machen, und umgekehrt, ganz zu schweigen davon, dass die vielen Nationalitäten, die verschiedene natürliche Schreibsymbole beschäftigen, auch frustrierend sein können =]
also wäre es lustig, chinesische Namen und Symbole zu verwenden…
komm schon, werde ernst!
Ich kann mir vorstellen, dies zur Komprimierung extrem großer Style-Sheets zu verwenden, bei denen mehrere Klassennamen pro Element verwendet werden.
Sie könnten in der Entwicklung alles semantisch gestalten und dann Ihren Code durch ein Minifizierungs-Skript laufen lassen, um die Klassennamen zu ersetzen, bevor Sie ihn live stellen.
Nun, wo wäre das Internet ohne Unicode-Selektoren.
Auch wenn das interessant aussieht, würde ich es nicht empfehlen/verwenden. Klassennamen sowie IDs spielen eine Rolle im SEO, daher wählen Sie sie besser mit Bedacht.
Was für eine lustige Idee. Wenn Sie eine schicke JavaScript-App zum Durchsuchen von Unicode-Zeichen möchten, probieren Sie den Unicode Character Finder