Yahoo! User Interface Blog (YUIBlog)

CSS Quick Tip: CSS Pfeile und Formen ohne Markup

Oft ist es nützlich, einen Pfeil oder irgendeine Art von kontextuellen Hinweis darauf, was etwas Element ist verwandt zu zeigen. Wir sehen dies häufig mit Tooltips, die Pfeile zu verwenden, um auf das Element, das sie auslöst wird.

Meist wird jedoch das Hinzufügen in dieser Pfeil ist mit Kosten verbunden, sowohl in Markup und in CSS, die die Menschen, die nicht wollen, diesen Stil zu verwenden, um nicht nur für diese Extra-Markup zu kompensieren durch Ausblenden von Display zwingt sie, sondern auch in dem tatsächlichen Gewicht der Seite für das Markup jedes Pfeils. Die Kosten sind noch höher, wenn Sie ein Bild, um diesen Pfeil Display zu verwenden, da der zusätzliche Aufwand der Daten, die übertragen (und möglicherweise eine zusätzliche Anforderung, wenn die Behandlung nicht sprited) werden muss.

Heute werde ich Ihnen einen Weg zeigen, um mit diesen bildlichen Andeutungen, ohne irgendwelche Markup zu erstellen hinzuzufügen. Wir verwenden diese Technik innerhalb von Liferay und AlloyUI für unsere Reiter System. Wir hatten eine ältere Gruppe von Tabs wir brauchten, um Stil, den Träger mit den Tabs getrennt leben im Markup aus dem Abschnitt um sie logisch sind verwandt, die es sehr schwer, um visuell anzuzeigen Beziehung macht. Zum Beispiel können Sie nicht setzen einen Rahmen um sowohl in der Registerkarte Abschnitt und den Registerkarten, weil sie nicht teilen, einen gemeinsamen Elternteil.

Stattdessen mussten wir kommen mit irgendeiner anderen Art und Weise zu zeigen, dass die ausgewählte Registerkarte auf der aktuell angezeigten Abschnitt verwandt. Die andere Herausforderung war, dass jeder Karteireiter benötigt, um die gleiche Markup und CSS-Struktur wie die AlloyUI Registeransicht zu teilen, wo sie einen gemeinsamen Elternteil teilen.

Also wir wollten nicht in benutzerdefinierten Markup hinzufügen, um visuelle Beziehung für eine Gruppe von Tabs vs andere zu zeigen.

Diese Technik basiert auf einem durch das diskutiert wurde Filamentgruppe und fachmännisch Pionierarbeit von Tantek Çelik (wem wir das Vergnügen, auf der diesjährigen hatte YUIConf 2010 ).

Ich werde schnell decken das Konzept dessen, was wir tun werden.

Das Root-Konzept ist die Schaffung polygonale Formen mit sehr großen Grenzen. Wie dies geschieht, ist, indem die Breite und Höhe eines Elements auf 0, und die eine große Grenze auf dem Element. An der Ecke eines Elements Grenze, wird eine natürliche Form erstellt. Durch die selektive Einstellung verschiedener Seiten der Grenze Farbe transparent, können wir verschiedene Formen.

Allerdings hat dies alles in großer Tiefe wurde vor bedeckt. Was ich denke ist ziemlich cool ist, wie dies ohne eingelegte Markup in der Seite zu tun.

Generieren von CSS-Inhalt

CSS erlaubt es uns, Inhalte über eine Eigenschaft namens, sinnigerweise, "Content" zu generieren. Allerdings können wir nur diese Eigenschaft verwenden, mit dem :after oder :before Pseudo-Elemente, und wir sind etwas, was wir einfügen können beschränkt (wir können nicht mehr einfügen HTML zum Beispiel).

Was ist cool an diese ist aber, dass wir mit dem Inhalt einzufügen, wir können Stil, als wäre es ein Element waren. Damit können wir sie in eine polygonale Form zu transformieren. Und weil das :after und :before Pseudo-Elemente vor oder nach dem Inhalt unserer Element (und nicht außerhalb des Elements) einsetzen, können wir es bewegen und positionieren Sie es in Bezug auf unser Element. Von dort aus können wir es als eine kontextuelle Zeiger zu verwenden.

Lassen Sie uns durch den Code gehen.
Erstens, unser HTML:

  <div id="demo"> </ div> 

Lasst uns unser Feld, um Stil wie eine Schachtel aussehen:

  # Demo {
	 background-color: # 333;
	 height: 100px;
	 position: relative;
	 width: 100px;
 }

Sie werden bemerken, dass wir die relative Position gesetzt. Dies ist, damit wir unsere Zeiger auf absolute gesetzt haben und es bleiben in Bezug auf unsere Box.

Nun, lassen Sie uns fortfahren und legen Sie die Basis-Styling für unsere Zeiger:

  # Demo: after {
	 Inhalt: '';
	 Höhe: 0;
	 position: absolute;
	 Breite: 0;
 }

Sie werden bemerken, ein paar Dinge. Einer, fügten wir einfach eine Leerstelle, die genug, um uns ein Handle für Stil ist. Zweitens, wir nehmen Stellung zur absoluten so können wir den Zeiger zu bewegen, wo wir in Bezug auf Kasten wollen.

Nun, hier ist der Code, um den Zeiger auf Stil wie eine Form aussehen:

  # Demo: after {
	 Inhalt: '';
	 Höhe: 0;
	 position: absolute;
	 Breite: 0;

	 border: 10px solide transparent;
	 border-top-color: # 333;
 } 

Nun, um das Ganze abzurunden, lassen Sie uns fortfahren und positionieren Sie den Zeiger auf dem Feld. Seit unserer relativen Elternteil ist unser Element # demo, sind unsere Koordinaten relativ zu seinen Koordinaten. Es ist auch wichtig zu erwähnen, dass die Dimension unserer Zeiger von der Grenze Breite gesteuert wird. So dass die Gesamtbreite der Zeiger in diesem Fall beträgt 20 Pixel (eine schräge Seite ist 10px und die andere schräge Seite ist die andere 10px).

Sagen wir also, wollen wir Sie auf den Pfeil verwenden, um die Box aussehen wie ein Kommentar oder Tooltip zu machen, würden wir es auf dem Boden zu platzieren und verschieben Sie sie ein paar Pixel in.

  # Demo: after {
	 Code ... Zurück ...

	 Top: 100%;
	 left: 10px;
 }

Das macht unsere Box wie folgt aussehen:

Oder sagen wir wollten unser Zentrum Pfeil, der das, was wir in den Registerkarten zeigte ich früher in Liferay zu tun ist.
Einstellen des linken auf 50% wird die oben / links Punkte der Pfeil in die Mitte unserer Box, die visuell bedeutet gesetzt, wird es immer sein, aus der Mitte.

Was wir brauchen, anstatt zu tun, und warum ich, dass unsere Pfeil Maße von der Größe Grenze kontrolliert werden erwähnt, ist es, positionieren Sie es 50% von der linken Seite, aber einen negativen linken Rand auf, dass es genau das gleiche ist wie der border-width unserer Pfeil.

Also, um es horizontal Zentrum, würden wir tun:

  # Demo: after {
	 Code ... Zurück ...
	
	 border: 10px solide transparent;
	 border-top-color: # 333;

	 Top: 100%;
	 links: 50%;
	 margin-left:-10px;
 } 

Und indem Sie die Seite unseres Pfeil hat Farbe, können wir leicht die Ausrichtung des Pfeils. Grundsätzlich gilt die Regel, egal auf welcher Seite des Pfeils wir unser Feld zu zeigen, bis auf, das ist die Seite der Grenze geben wir Farbe zu wollen.

Also, wenn ich meine Box auf der linken Seite des Pfeils angezeigt werden sollen, ändere ich die Farbe zu sein auf der linken Seite der Grenze:

  # Demo: after {
	 Code ... Zurück ...

	 border: 10px solide transparent;
	 border-left-color: # 333;
 } 

Da es auf der linken Seite ist, brauchen wir auch nach oben / links Koordinaten des Pfeils als auch zu ändern. Also werden wir es zu ändern:

  # Demo: after {
	 Code ... Zurück ...

	 Links: 100%;
	 top: 10px;
 } 

Welche ergibt dies:

Nun ist das Teil wirklich cool, dass wir mit dieser kann das kombinieren :before und :after Pseudos, mehrere Pfeile, um ein einzelnes Element hinzuzufügen. Damit können wir nicht nur ein Element mit Zeigern in zwei Richtungen gehen, aber Sie können auch eine Grenze zu simulieren, indem sie eines Pfeils etwas größer und Zentrierung es über einem anderen der andere Pfeil.

Zum Beispiel Code wie folgt:

  # Demo {
	 width: 100px;
	 height: 100px;
	 background-color: # ccc;
	 position: relative;
	 border: solid # 4px 333;
 }

 # Demo: after, # Demo: before {
	 border: solid transparent;
	 Inhalt: '';
	 Höhe: 0;
	 Links: 100%;
	 position: absolute;
	 Breite: 0;
 }

 # Demo: after {
	 border-width: 9px;
	 border-left-color: # ccc;
	 top: 15px;
 }

 # Demo: before {
	 border-width: 14px;
	 border-left-color: # 333;
	 top: 10px;
 }

Kann diese produzieren:

Sie können auch den Pfeil, und es verwenden, um im Inneren der Box zeigen und (mit etwas CSS3 Styling) bekommen eine Box, die wie folgt aussieht:

Durch die Manipulation der linken und rechten Breiten des Pfeils, können wir noch tun, eine Falte über Wirkung und simulieren einen Schlagschatten mit der anderen Form, mit diesem Code:

 # Demo: before {
	 border-width: 10px;
	 border-top-color: # ccc;
	 border-left-width: 50px;
	 border-right-width: 0;
	 left: 0;
 }

 # Demo: after {
	 border-width: 2px;
	 border-top-color: # 777;
	 border-left-width: 50px;
	 border-right-width: 0;
	 left: 0;
 }

Vorsichtsmaßnahmen

Browser-Unterstützung

Dies wird in allen wichtigen Browser, einschließlich IE8 unterstützt. Die beiden Ausnahmen sind natürlich IE 6 und 7, die keine Unterstützung der :before und :after Pseudo-Elemente.

Nun, warum sollte ein Unternehmen, Produkt wie Liferay in Ordnung sein mit Versand etwas, das nicht in 2 Versionen des IE, die immer noch behaupten, ein anständiges Stück des Unternehmens Browser-Markt wurde unterstützt?

Vor allem, weil wir diese verwendet für etwas, das für den Benutzer hilfreich, aber nicht entscheidend für seine Funktion war. Zum Beispiel in IE6 und 7, die Registerkarte sieht immer noch gewählt, es hat noch einen Hintergrund, es hat einfach nicht einen Indikator zeigt auf den Inhalt.

.

Deshalb würde ich empfehlen beim Einsatz dieser Technik, wenn IE6 und 7 sind wichtig für Sie zu unterstützen, wählen Sie Bereiche, in denen diese Technik hilfreich sein wird, sondern bieten eine anmutige Fallback oder alternativen Stil für diejenigen Versionen des Internet Explorers.

Generated Content ist nicht Teil des DOM

Der generierte Inhalte für das Pseudo-Element, obwohl styleable, ist eigentlich nicht Teil des DOM-Baums und nicht als Element existieren. Während CSS 3 nicht einen Haken in diese bieten mit der ::before und ::after Pseudo-Elemente (man beachte die zusätzlichen Doppelpunkt), ist es dort in erster Linie als Designer Haken, und der Inhalt nicht als tatsächliches Element vorhanden sind. Es gibt eine Reihe von Auswirkungen auf diese.

Nicht prüfbare

Da Liferay unterstützt umfangreiche Thematisierung, eine der häufigsten Fragen, die ich gestellt bekommen ist "Wo sind die Pfeile auf den Registerkarten aus?", Weil das: nach /: vor Pseudo-Elemente sind nicht von Firebug, Webkit Web Inspector, kontrollierbarem Operas Dragonfly, etc.

Dokumentation hilft bei dieser, ebenso wie eine klare und organisierte Stylesheet, aber Sie wissen verpassen die Auffindbarkeit kommen wir süchtig nach mit Firebug habe.

Nicht skriptfähig (kinda sorta)

Das :after / :before pseudos nicht direkt anzielbare über JS, so kann man nicht manipulieren ihre Eigenschaften direkt über die normale Route, zum Beispiel, wenn Sie auf den Pfeil dynamisch festgelegt Position wollte.

Sie können jedoch die wirklich genial nutzen Stylesheet-Dienstprogramm in YUI 3, um die Pseudos für Ihre Inhalte über diesen Weg zu manipulieren. Während also nicht direkt als Ziel haben über ein Script, können Sie es mit Script manipulieren.

Zum größten Teil sind diese Vorbehalte Vorbehalte und Entwickler sind ziemlich gering im Vergleich zu den Vorteilen. Darüber hinaus mit der Arbeit mit Daten URIs und mit MHTML getan haben, können Sie sich vorstellen, mit dieser Technik, um Markup-frei, Wunsch-Bilder als auch zu injizieren.

Insgesamt kann diese Technik eine sehr einfache Möglichkeit, um Elemente auf Ihrer Seite zu verbessern und einen Kontext für die Benutzer sein.

Weiterführende Literatur

• Eine Studie von regelmäßigen Vielecken
• Bild-freie CSS Tooltip Pointers - eine Verwendung für Polygonal CSS?
• CSS generierte Inhalte Techniken - Opera Developer Community
• Daten-URIs erklärt

Arbeiten Sie mit YUI 3 bei Liferay

Haben Sie eine Leidenschaft für das Front-End Entwicklung und Liebe Open Source Software? Liferay ist die Einstellung talentierter Frontend-Entwickler, die die Welt eine Zeile Code zu einem Zeitpunkt ändern möchten. Wenn das klingt wie Sie wollen wir gerecht zu werden. Gehen Sie voran und schießen Sie uns Ihren Lebenslauf an careers@liferay.com .

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!