Yahoo! User Interface Blog (YUIBlog)

CSS Border Tricks mit Collapsed Boxes

8. März 2011 um 03.23 Uhr von Thierry Koblentz | In CSS 101 , Design- , Entwicklung | 8 Kommentare

Diese Tricks helfen Ihnen dabei entwirft, ohne auf die Verwendung von Bildern, CSS3 Gradienten oder überflüssige Markup. Durch die Zusammenführung Boxen mit Null line-height und height Werte, können wir Inhalte außerhalb des Inhalts anzuzeigen, über Grenzen hinweg.

Bi-Color Hintergrund

Dieses Beispiel umfasst nicht IE 6 / 7 Workarounds (den Quellcode dieser Demo-Seite für IE Fixes).

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

Dots und Rohre zwischen Listenelementen

Dieses Beispiel zeigt, korrekt in allen Browsern, nachdem einige einfache IE behebt.

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

Links und rechts zeigende Dreiecke

Dieses Beispiel umfasst nicht IE 6 / 7 Workarounds (den Quellcode dieser Demo-Seite für IE Fixes).

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6 und Grenzen der Transparenz

IE 6 nicht unterstützt das Stichwort " transparent "für Rahmenfarbe. Wenn Sie diesen Wert verwenden, zieht IE 6 einen schwarzen Rand.

Die Fehlerbehebung für dieses ist die Verwendung Chroma-Filter , die eine bestimmte Farbe der Inhalt des Objekts zeigt, wie transparent. Zum Beispiel erstellen Sie eine nach rechts zeigenden Pfeil können Sie mit dieser Regel:

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

Die font-size Erklärung ist ein weiterer Workaround für IE 6. Es ist sicherzustellen, dass dieser Browser keine Erhöhung der Höhe der Box.

Stoppen Sie den Pressen Ich habe gelernt, einen neuen Trick (danke Chungho Fang)!

Die Magie [zum Rand Transparenz in IE erstellen] auf 'border-style', entweder gestrichelte oder gepunktete gesetzt

---

Das ist es! Dies ist nur eine weitere Möglichkeit, Grenzen zu nutzen, um Bild-less Design zu erreichen.

Weiterführende Literatur

• A Study of regelmäßige Vielecke
• slantastic
• Slants

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Die CSS Eigenschaft position

14. Dezember, 2010 um 7.35 von Thierry Koblentz | In CSS 101 , Design- , Entwicklung | 6 Kommentare

Diese Eigenschaft gilt für alle Elemente. Es hat fünf mögliche Werte:

• static
• relative
• absolute
• fixed
• inherit

Position: static

Von § 9 Visuelle Aufbereitung Modell :

Die Box ist ein normales Feld, nach den festgelegten normalen Fluss . Die top , right , bottom und left Eigenschaften gelten nicht.

Aktivitäten in Ankündigung dieser Demo

• Die zweite Box zeigt genau, wo es ohne die Position Erklärung sein.
• Der Wert, der top nicht, weil in einem "statischen" Kontext, der berechnete Wert von Feld-Offsets ist immer auto .

Dinge zu erinnern,

• Wenn die position -Eigenschaft eines Elements ist der Wert der static , wird dieses Element nicht gesagt, positioniert werden.
• Da static ist der Ausgangswert (der Standardwert), gibt es keine Notwendigkeit, solche Styling in einer Erklärung Block gehören, wenn sie auf einen anderen Wert überschreiben wird.

position: relative

Von § 9 Visuelle Aufbereitung Modell :

Die Box ist die Position nach dem normalen Fluss (das nennt man die Position in berechneten normalen Fluss ). Dann wird der Kasten versetzt in seine normale Position. Wenn ein Feld B relativ positioniert ist, wird die Position der folgenden Box berechnet, als ob B nicht ausgeglichen wurden.

Aktivitäten in Ankündigung dieser Demo

• Box 'two' hat sich um 300 Pixel verschoben, aber box 'drei' sowie die folgenden Absätze blieben in Kraft. Es scheint, wie wenn die Box von der Seite aufgehoben wurde, so dass ihre Präsenz hinter sich. Dies liegt daran, Aufrechnung eine relativ positionierte Box nicht stört den Fluss.
• Die relativ positionierte Box überlappt die folgenden Elemente. Es zeigt vor anderen Boxen.

Dinge zu erinnern,

• Berechnete Werte sind immer links = rechts und von oben =-bottom. Wenn die direction des umschließenden Blocks wird ltr , den Wert von "links" gewinnt und "rechts" wird - "links". Wenn direction des umschließenden Blocks ist rtl , 'right' gewinnt und "links" wird ignoriert. Autoren könnten sich die Vorteile, wie die Dinge funktionieren, indem sie gleichwertig zu entgegengesetzten Eigenschaften zu nehmen.
• Anders als bei der "absoluten"-Modell, top , right , bottom und left Eigenschaften können nicht dehnen oder schrumpfen die Box (sie können nicht die Größe ändern).

position: absolute

Von § 9 Visuelle Aufbereitung Modell :

Die Box die Position (und möglicherweise auch Größe) wird mit dem angegebenen top , right , bottom und left Eigenschaften. Diese Eigenschaften geben Offsets in Bezug auf die Box mit Block . Eine absolut positionierte Box wird aus dem normalen Fluss vollständig (es hat keine Auswirkungen auf die spätere Geschwister) entfernt und mit einer Position in Bezug auf einen Container-Block. Auch wenn absolut positionierte Boxen haben Margen, sie nicht zusammenbrechen mit anderen Margen.

Aktivitäten in Ankündigung dieser Demo

• Da kein Feld-Offset angegeben ist, hat box 'zwei' nicht von ihrer ursprünglichen Position zu bewegen, aber wenn wir benutzt hatten top:0;left:0; zum Beispiel, dass das Feld würde die sein oberen linken Ecke des Viewports .
• Layout her ist es wie box 'zwei' hatte mit gestylt display:none . Die Box hat aus dem Fluss entfernt worden.
• Mit Box 'zwei' out of the flow hat box 'three' gegen box 'one' (die Ziffern gefolgt) verschoben.
• Wie alle Elemente aus dem Fluss, Feld 'zwei' entfernt wurde horizontal eingeschweißt.

Dinge zu erinnern,

• Für jede "absolute" oder "fixed 'positioniert Element der berechnete Wert für die display ist block .
• Für jede "absolute" oder "fixed 'positioniert Element der berechnete Wert für float ist none .
• A 'mit Block "ist eine Box, die eine Positionierung Kontext stellt. Es durch die nächsten Vorfahren ist mit einem etablierten 'position' der 'absolute', 'relativ' oder 'fixed'. Das heißt, die Eltern-Box kann nicht mit Block .
• Die Standard-Position eines absolut positionierten Box ist nicht immer das gleiche, als ob es mit top gestylt: 0; left: 0; (in einer LTR Kontext). Und das ist aus zwei Gründen:
  1. Der umschließende Block für eine positionierte Box wird durch den nächsten positionierten Vorfahren eingerichtet, wenn es keine gibt, ist die Referenz-Container das Root-Element. Die Container-Block, in dem die Root-Element lebt, ist ein Rechteck namens des ursprünglichen umgebenden Blocks. Für die kontinuierliche Medien, hat es die Abmessungen des Viewport (ein Fenster oder andere Bildfläche auf dem Bildschirm) und ist auf die Leinwand Herkunft verankert. Dieses Beispiel zeigt die Box in Bezug auf den Viewport positioniert (der Standard Container-Block).
  2. Das Element ist in Bezug auf die Polsterung, nicht im Content-Box noch die Grenze Feld des umschließenden Blocks positioniert. Dieses neue Beispiel zeigt, wo box 'zwei' wäre, wenn die Ränder der padding-Box nicht berührte den Rändern der Content-Box (die mit Block, der body ).
• Die Größe der Box kann das Ergebnis der sein top , right , bottom und left Eigenschaftswerte. Für Beispiele wird Nullung alle Eigenschaften machen den Kasten strecken, um die Dimensionen der padding-Box des umschließenden Blocks entsprechen. Siehe Nullung alle Feld-Offsets (Anmerkung: IE6 nicht strecken Kasten).
• Um eine Maske Overlay, das nicht scrollen Sie mit dem Dokument (wie in der erstellen vorherigen Beispiel ), verwenden Sie entweder fixed anstatt absolute oder Stil body mit position:relative als die anfängliche Positionierung Block ist der Viewport (Styling html würde nicht im IE) . Da diese Overlay-Demo zeigt.
• position:absolute löst hasLayout .

Wichtigste daran zu erinnern,

Weil diese Positionierung System entfernt Boxen aus dem Fluss, ist es schlechte Praxis als es für das Layout verwenden.

position: fixed

Von § 9 Visuelle Aufbereitung Modell :

Die feste Positionierung ist eine Unterkategorie der absoluten Positionierung. Der einzige Unterschied ist, dass für eine feste Position ein, die mit Block durch den festgestellt wird Ansichtsfenster . Für kontinuierliche Medien , tun festen Kartons nicht bewegen, wenn das Dokument gescrollt wird. In dieser Hinsicht sind sie ähnlich festen Hintergrundbildern . Für ausgelagerte Medien (wo der Inhalt des Dokuments wird in einer oder mehreren diskreten Seiten aufgeteilt), sind Boxen mit festen Positionen auf jeder Seite wiederholt. Dies ist für die Platzierung, zum Beispiel eine Signatur am unteren Rand jeder Seite nützlich. Boxen mit festen Position, die größer als die Seite Bereich sind, werden abgeschnitten. Teile der festen Position ein, die nicht in der ersten Container-Blocks sichtbar wird nicht gedruckt.

Aktivitäten in Ankündigung dieser Demo :

• Da die feste Positionierung ist eine Unterkategorie der absoluten Positionierung, alles, was wahr für 'absolute' ist auch für 'fixed' wahr sei (das Element Schrumpf-Packungen, ist es aus dem Fluss, etc. entfernt).
• Die Box in Bezug auf den Viewport positioniert ist, ist es nicht mit der Seite zu blättern.
• In IE 6, erscheint das Feld als statisches Feld , aber es ist eine "lustige" Workaround dafür.
• Beim Drucken des Dokuments, box 'zwei' erscheint auf jeder einzelnen Seite.

Dinge zu erinnern:

• Die Box ist die Position nach dem "absoluten" Modells berechnet, sondern darüber hinaus, die Box ist fest in Bezug auf einige verweisen. Im Falle von Handheld, Projektion, Leinwand, tty und tv media-Typen wird die Box mit Bezug auf die feste Ansichtsfenster und bewegt sich nicht, wenn gescrollt wird.
• Inhalt kann inaccessile zu sehende Benutzer, wenn ein Teil der Box befindet sich außerhalb des Viewports Bereich.
• Im Falle der Printmedien-Typ, können Autoren wollen ein Element aus, die auf jeder gedruckten Seite zu verhindern. Vielleicht mit einem @ media-Regel, wie in:

    @ Media print { 
     # Logo {position: static;}
   } 

• Wie position:absolute , position:fixed löst hasLayout in IE.

Position: erben

Wenn position:inherit für ein bestimmtes Feld angegeben ist, dann wird es die gleichen berechneten Wert wie die Eigenschaft für das Feld der Muttergesellschaft.

Beachten Sie, dass IE 6 und 7 nicht unterstützen dieses Schlüsselwort, außer wenn sie mit verwendet direction und visibility (siehe CSS Property Value erben ).

Dinge zu beachten,

Box-Offsets

Seien Sie sich bewusst, dass für absolut positioniert und fixiert Boxen, Werte in Prozent für Set top , right , bottom und left sind nach den Abmessungen des umschließenden Blocks (die nicht den übergeordneten Feld sein) berechnet.

'Position' und 'Überlauf'

Eine Box mit Stil overflow:hidden wird Clip relativ positionierten Elementen (verschachtelte Boxen), aber es wird nicht immer verbergen absolut positionierten diejenigen. Dies ist, da das übergeordnete Feld ist nicht immer der umschließende Block (die nächsten Vorfahren mit einer 'position' der 'absolute', 'relativ' oder 'fixed').

Kurz gesagt, bedeutet dies, absolut positionierten Elementen wird außerhalb einer Box mit Überlauf Stil zeigen: versteckt sei denn, ihre Container-Block ist die Box selbst oder ein Element innerhalb der genannten Box. Diese Demo-Seite zeigt, wie die Dinge funktionieren.

Margins

Autoren können die Margen auf Elemente, unabhängig von ihrer Positionierung Schema.

Der Fall des IE

In IE, 'Positionierung' a-Box kann ein Segen oder ein Fluch sein:

• In IE6, position:relative (with haslayout) kann verwendet werden, um ein Feld mit negativen Margen von Stil zu verhindern nicht abgeschnitten von einem übergeordneten Container (sehen, wie die Positionierung der Box behebt dieses Problem).
• Positionierung eines Elements können "stört" die Art und Weise Kisten stapeln in IE 6 und 7, da dies eine neue Stapel-Kontext (siehe a etablieren können Testfall ).

Stacking Ordnung und Stapeln Ebene

• Nach der Sequenz in den Quellcode, kommen positionierte Boxen vor Wagen und Boxen in den normalen Ablauf.
• Autoren können Stack-Ebenen über die 'z-index-Eigenschaft nur auf positionierte Boxen angeben.
• In IE6 und 7 können die einfache Tatsache der Positionierung einer Box Schaffung eines Stapelkontext (siehe oben, " bei IE ").

Mobile Geräte

Lesen Sie PPK-Artikel, der [Sechsten] Positionswert , um herauszufinden, warum Handy-Browser-Anbieter kann nicht wirklich unterstützt position:fixed .

Weitere Lesungen

• Visuelle Aufbereitung Modell
• Position (CSS-Eigenschaft)
• Die Position Erklärung

Ein "Geist" Analogie von DrLangbhani:

Ein Element mit relativ ist immer versetzt, es ist normal, Position in der Strömung. In anderen Worten, es ist relativ zu denen es unter normalen Umständen verschoben und verschieben es hat keinen Einfluss auf das Layout der Elemente um ihn herum. Es ist wie ein Gespenst, das seinen Körper hinter sich gelassen hat. Ein Körper, der Breite und Höhe hat und beeinflusst seine Umgebung, sondern ist unsichtbar. Die geisterhaften Feld ist in der Lage sich zu bewegen, aber immer noch zu den alten Körper verbunden, dass seine Position noch von ihm gemessen. Jetzt ein Element mit Position absolute ist noch einfacher. Es wirkt sich nicht mehr seine Umgebung überhaupt (es ist aus dem Layout Flow gezogen). Es ist jetzt ein echter Geist ohne Körper hinter sich gelassen. Soweit seine Geschwister betreffenden Elemente sind es, als ob es nicht mehr gibt. Um seine Position durch jede seiner übergeordneten Elementen suchen, bis man eins mit jeder der beiden Positionen zu finden: relative [position: fixed,] oder position: absolute. Das Element wird als Bezugspunkt dienen. Nur wenn Sie nicht finden, eine "positioniert"-Element wird aus dem Dokument ausgeglichen werden.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Quick-Tipp: Anpassen der Mobile Safari tippen Markierungsfarbe

1. Oktober 2010 auf 11.34 Uhr von Ryan Grove | In Design- , Entwicklung | 3 Kommentare

Schon mal aufgefallen, der semi-transparenten grauen Hintergrund, dass manchmal erscheint, wenn Sie etwas in Mobile Safari zu nutzen? Das ist die Standard-Leitungswasser Highlight-Farbe, die Mobile Safari angezeigt, wenn Sie auf ein Element mit einem JavaScript Click-Handler zu erschließen.

Leider hat Mobile Safari keine Möglichkeit, zwischen Normal klicken Abonnenten und delegiert klicken Sie Abonnenten, die, wenn das Click-Ereignis zu einem Container, anstatt für jedes Kind des Containers angebracht ist zu unterscheiden. Als Ergebnis wird eine delegierte klicken Sie in der gesamten Behälters und nicht nur das Element, das abgehört wurde hervorgehoben Ergebnis, und das kann sowohl hässlich und verwirrend für den Anwender.

Die gute Nachricht ist, dass Mobile Safari unterstützt eine Erweiterung namens CSS -webkit-tap-highlight-color , die Sie verwenden, um die Farbe des Leitungswassers Highlight anpassen oder ausblenden kann komplett.

Die -webkit-tap-highlight-color -Eigenschaft akzeptiert jedem Standard-CSS-Farbwert, aber Sie werden wahrscheinlich wollen ein RGBA-Wert zu versehen, um die Alpha-Transparenz zu kontrollieren. Das Deaktivieren der Hahn Highlight ist so einfach wie das Festlegen der Alpha-Wert auf 0 , etwa so:

 #container { -webkit-tap-highlight-color: rgba(0,0,0,0); } 

Starten Sie Ihre Lieblings-iOS-Gerät und sehen diese einfache Demo zu sehen, was eine delegierte klicken Sie mag beides mit und ohne Leitungswasser Highlight aussieht. Für weitere Einzelheiten über -webkit-tap-highlight-color und andere nützliche Mobile Safari CSS-Erweiterungen finden Sie in der Safari CSS Reference .

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Alternative Skins für YUI 3.1.0 Slider

6. April 2010 um 06.03 Uhr von Jeff Conniff | In Design- , Entwicklung | 1 Kommentar

Wir beschlossen, die nehmen YUI 3 Schiebers Widget Skins, eine visuelle Kerbe für YUI 3.1.0. Das waren unsere Ziele:

1. Verbessern den optischen Gesamteindruck Schmackhaftigkeit und 3-D Optik
2. Das Angebot einer breiteren Palette von Daumen und Schiene Skins
3. Geben Sie zwei Skins zu dienen dunkle sowie helle Seite Hintergründe
4. Geben Sie einen vollständigen Satz von Daumen und Schienen für den vertikalen als auch horizontalen Einsatz
5. Machen Sie es sich einfacher zu mischen und anzupassen Daumen mit unterschiedlichen Schienen-Stile
6. Geben Sie Photoshop Vermögenswerte zu den Entwicklern bei der Anpassung Schieberegler Bilder auf eine beliebige Hintergrundfarbe passen

Vergleichen Sie die YUI 2 Schieberegler Skins mit der YUI 3 Einsen unten. Der neue Satz hat mehr Abwechslung und sollte ein breites Spektrum von Seiten und Stile dienen.

YUI 2 Slider Skins:

YUI 3 Schiebers Skins:

Wir haben nicht beschränken den Daumen, um Rechtecke und 45 Grad-Winkel. Dies stellte einige Herausforderungen mit Anti-Aliasing. Die YUI 2 Daumen haben Schatten in den Daumen Bild eingearbeitet, so dass sie eine feste Farbe grau. Wir haben dies, indem ein Schatten-Objekt, das getrennt von den Daumen Bildes verbessert. Der Schatten hat opacity: 0.15 . Dies bedeutet, es sieht natürlich wie der Schatten fällt auf die Schiene und die Markierungen.

Wir geben einen ursprünglichen Photoshop-Dateien mit jedem der Schiene und Daumen Bilder. Dies wird den Entwicklern die Quelle, aus der leicht anpassen, um die Bilder so, dass sie ihr Bestes, wenn sie auf welche Farbe Hintergrund Ihrer Website platziert sehen.

YUI 3er Widget Fundament erreicht GA Status der vergangenen Woche mit der Veröffentlichung von YUI 3.1.0 . Wir verfügen noch nicht über eine volle Schiefer von nativen YUI 3 Widgets, und wir haben noch nicht eine Reihe von globalen Skins definiert. Allerdings sollte die Arbeit, die wir auf visuelle Elemente haben für den Beta-Slider-Komponente machen es sinnvoll, die kurzfristig, und wir werden all diese visuellen Optionen auf, wie alternative Themen oder Beispiele zu tragen, sobald YUI 3er Baseline Themen vorhanden sind, .

Werfen Sie einen Blick auf diese Arbeit Codebeispiele des neuen Schieberegler. Kasse der hinter den Kulissen detaillierte Funktionsweise der Haut Bildern und CSS.

Wir hoffen, dass diese neuen Schieberegler wird eine schöne visuelle Ergänzung zu Ihrer Trickkiste werden.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Drei neue Navigations-Design-Patterns

22. Februar 2010 um 04.56 Uhr von Christian Crumlish | In Design- | 5 Kommentare

In den vergangenen Monaten habe ich führte eine Prüfung der Muster in Yahoo! 's interne Design-Pattern-Bibliothek, mit einem Auge in Richtung Publishing da viele von ihnen wie möglich in die offene Bibliothek YDN . Warum? Nun, für eine Sache, um mehr Augäpfel auf sie zu bekommen, um mehr Feedback zu erhalten und weiter verbessern die Muster. Auch, weil nur sehr wenige Muster in der Bibliothek Yahoo!-spezifische Informationen enthalten, und ein alternatives Verfahren ist nun für Sicherheitsüberprüfungen spezifischen Anforderungen an die Yahoo!-Netzwerk und Komponenten der Marke kann der Design-Pattern-Sammlung ab sofort noch bequemer auf Fokus (relativ) Universal-Design-Prinzipien für Web-Implementierungen.

Ich absolvierte die Prüfung vor dem Ende des letzten Jahres und erwarten, dass neue Muster in Chargen in den nächsten Monaten veröffentlichen. Einige Muster werden reifen und bieten eine solide Grundlage für die Website-Design. Ein paar wird als Beta-Muster, die erhebliche Veränderungen in den nachfolgenden Updates auf Grundlage des Feedbacks erhalten unterziehen können veröffentlicht werden. Unabhängig von ihrem Status, hoffen wir, dass Sie sich zu engagieren und zu überprüfen und Rückmeldung über die Muster zur Verfügung gestellt.

Die erste Charge von Mustern kommen aus der Prüfung bezieht sich auf Navigationsleisten . Es gibt drei Mustern so weit in dieser Gruppierung: Top Navigation , Left Navigation und Progress Bar . Eine berechtigte Frage ist, ob oberen und linken Navigationsmenüs immer noch die beste oder aktuellen Weg, um eine Website zu navigieren und Inhalte zu finden? Wir haben noch viele Beispiele von ihnen über die Bahn und im Einsatz bei Yahoo! so jetzt sage ich werde ja, aber es lohnt sich, darüber nachzudenken.

Wo immer möglich versuche ich, Muster zurück zur der YUI-Bibliothek und gegebenenfalls zu anderen Code und Umsetzung Lösungen. YUI hat große Unterstützung für Navigationsleisten und Menüs Beispiele. Wahrscheinlich der beste Ausgangspunkt ist die Menü-Widget .

Eine interessante Frage, die wir studiert Nomenklatur war die Unterscheidung zwischen einer schrittweisen Fortschritt-Anzeige (das ist, was das Muster geht) und eine kontinuierliche Fortschritte bar (für die es eine große YUI Beispiel ). Diese beiden Dinge werden oft mit ähnlichen Namen genannt, aber unterschiedliche Funktionen. Vorschläge für weitere geeignete Terminologie sind willkommen.

Bitte sehen Sie sich diese neue Muster und lassen Sie uns wissen, was Sie denken!

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

iPhone Design-Schablonen in die Pattern Library

17. Dezember 2009 um 02.11 Uhr von Christian Crumlish | In Design- | 1 Kommentar

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Die Ergebnisse der Akkordeon-Pattern-Umfrage

26. Oktober 2009 um 02.44 Uhr von Christian Crumlish | In Design- , Entwicklung | Keine Kommentare Vor ein paar Monaten haben wir gemeinsam unsere gegenwärtigen Überlegungen über die "Akkordeon" Navigation Komponente , und bat die Gemeinde von Web-Entwicklern und Designern, die dieses Blog lesen, um zu einer Umfrage teilzunehmen, die uns helfen zu bestimmen Standardwerte derzeitigen Praktiken und andere Richtlinien, um in eine einbeziehen Akkordeon-Muster und einen Beitrag zu einem Akkordeon YUI-Komponente. Ich habe einige Zeit jetzt zu überprüfen und die Ergebnisse untersuchen, und ich wollte sie mit der Gemeinschaft teilen, wie wir schreiben ein "Beta"-Version des Musters und macht euch bereit, es zu teilen, so ohne weiteres adieu, sind hier die Ergebnisse . (beachten Sie, dass diese Umfrage nicht in Betracht gezogen werden streng wissenschaftlich) Wer Befragten geantwortet identifizierten sich die folgenden Möglichkeiten:

• Designer 21,4%
• Entwickler 32,1%
• Hybrid (Beide Designer und Entwickler) 42,3%
• None of the Above 4,2%

Terminologie Auszeichnungen Überwältigende Mehrheiten quer durch alle Befragten einig, dass

• Akkordeon und Akkordeon-Menü das Gleiche bedeuten (73%)
• Akkordeons und Tree Controls sind zwei verschiedene Dinge (89%)

Viele Kommentatoren beschrieben den Unterschied zwischen Akkordeon und Bäume entlang dieser Linien: "Tree Control im Allgemeinen bedeutet, in eine Tiefe von Hierarchie, die nicht im allgemeinen mit einem Akkordeon." Eine kleinere Mehrheit sagte (60%), die Akkordeon-und Klapp-Panels um die gleiche Sache beziehen . Diese Mehrheiten waren konsistent über Rollen. Präsentation des Akkordeons Eine solide Mehrheit (68%), sagte, dass Akkordeons aus kann sowohl horizontal als auch vertikal (und in der Tat das Muster ist gut belegt, die im Internet) festgelegt. Die Leute vorgeschlagen, dass die Etiketten auf einer horizontalen Akkordeon vertikal und / oder gedreht geschrieben werden sollen. Eine noch größere Mehrheit (72%) sagte, dass Akkordeons können nur zwei Ebenen (dies deckt sich mit der Unterscheidung zwischen Akkordeons und Bäume) haben: Eine knappe Mehrheit (53%) sagte, dass Akkordeons in anderen Akkordeons können verschachtelt werden. Die schriftlichen Stellungnahmen vorgeschlagen, dass die Formulierung der Frage etwas zu antworten, dass es sicherlich möglich, aber nicht unbedingt wünschenswert, Vorschläge machen, wie "Wenn du ausreichend Regenrinne ihnen dies möglich wäre, aber im Allgemeinen eine schreckliche Idee geführt - ein bisschen wie mit zu viele Tabs und mit ihnen in mehrere Zeilen umbrochen. " Dies war eine der Fragen, bei denen selbst beschrieben Designern und Entwicklern nahm gegenüberliegenden Seiten. 57% der Entwickler und Hybriden einig, dass Akkordeons verschachtelte kann werden, während 64% der Designer sagte, sie kann es nicht sein. (Keiner der Aboves 50/50!) Wenn ich raten müsste, würde ich die Entwickler (und Hybriden), inniger mit dem, wie als das, warum haben mag mehr Ausdruck eines "du könntest es tun angeschlossen sagen ... "Perspektive, während Designer haben zum Ausdruck gebracht eher ein" ... aber man sollte nicht "point of view. Wie Akkordeons sollte eine kleine Mehrheit (54%) verhalten sich überzeugt, dass Akkordeons sollte für mehr als ein Panel ermöglichen, werden in einem offenen Zeit. Beide Verhaltensweisen können online gefunden werden, so unser Eindruck ist, dass dieses Verhalten mehr auf die Zwänge der Bauraum und der Zweck des Akkordeons als auf einer Decke Regel die eine oder die andere ab. Diese Frage auch entlang Identität Linien gespalten, aber in einer zweideutigen Weise. Hybriden bevorzugt einen Panel-at-a-time-Regel von einer winzigen Mehrheit, während Designer und Entwickler, und keiner der Aboves vereinbart, dass mehrere Panels Ordnung durch etwas größere Mehrheiten sind. Eine viel größere Mehrheit (73%) glaubt, dass ein Akkordeon kann eine vollständig geschlossenen Zustand (das heißt, dass es nicht notwendig ist, dass es immer ein Panel geöffnet werden können). Der einzige Ausreißer ist, dass die keiner der Aboves 60% brach für die Position, dass es muss immer ein Panel zu öffnen. Mehrere Kommentatoren vorgeschlagen, dass es eine gute Übung ist es, ein Panel standardmäßig geöffnet haben, und aus diesem Panel, um entweder die erste, der zuletzt verwendet werden. Ein weiterer großer Mehrheit (76%) glaubt, ein Akkordeon der Baugröße kann nach Bedarf ändern, anstatt auf eine einheitliche Größe beschränkt. (Natürlich gibt es Zusammenhänge, wie der Bildschirm eines mobilen Gerätes, in denen es eine gültige Wahl oder sogar eine Zwangsbedingung für die Konstruktion, dass ein Akkordeon eine einheitliche Größe zu erhalten.) Eine sehr knappe Mehrheit (51%) vorgeschlagen, dass Akkordeons öffnen sollte klicken Sie auf (wie auf schweben im Gegensatz) und eine fast ebenso große Minderheit (45%) sagte, dass es abhängig ist. Interessanterweise waren weniger als 4% bereit, Zustand des Akkordeons sollte schweben in der Regel offen. Schriftliche Stellungnahmen zu dieser Frage bot viele gute Denkanstöße, wie zB:

Das Öffnen einer Platte sollte eine ausdrückliche Handlung. Wenn ein Akkordeon hat mehrere Panels, konnte Öffnung schweben einem erschütternden Erlebnis. Vielmehr nutzen ein Tooltip zur Übersicht Details dessen, was in das Panel zu vermitteln, und haben des Nutzers auf ausdrücklich "Klick" auf das Panel zu öffnen.

Abhängig von der Konfiguration der einzelnen Akkordeon. Ich habe diese Beispiele zusammen [ multiple , Rollover ], so kann der Entwickler tatsächlich die "best fit" für jeden Anwendungsfall. Außerdem sollte es die Möglichkeit, Überschlag mit verschiedenen Regeln zu verwenden: (eins meisten offen) oder (Elemente sollten auf mouseover nur geöffnet werden).

Für fortgeschrittene Nutzungen, sollte ein Akkordeon auf hover bei Drag & Drop-Operationen zu öffnen. In allen anderen Situationen, kann man nicht darauf vertrauen, dass die Hover-intentional ist.

Accessibility Schließlich fragten wir eine offene Frage, die Fischerei auf alle bekannten Fragen der Zugänglichkeit mit Akkordeons und bekam eine Menge toller Antworten. (In unserem Beispiel Ausgabe stimmten die meisten Leute, die machen das ganze Etikett anklickbar und nicht nur ein kleines Symbol, ist wichtig.) Hier ist eine Auswahl von anderen Einblick über die Zugänglichkeit mit Akkordeons:

Ich denke, es ist sicher anzunehmen, dass ein Akkordeon-Interaktion eine erweiterte Interaktion ist. Viele Probleme bei der Barrierefreiheit entstehen können.

1. Der Inhalt wird hinter Paneele versteckt, damit die Leute können es nicht finden.
2. Je nach Größe der klickbare Bereich oder der Trigger zum Öffnen / Schließen der Platten könnte es Probleme mit der manuellen Geschicklichkeit erforderlich.

Akkordeons öffnen sollte alle Panels, wenn Javascript ist nicht verfügbar (obwohl das auch ein "Flimmern" für Menschen mit Javascript erzeugen).

Es hängt davon ab, ob der Inhalt in die verborgenen Panels ist in den DOM oder beim Öffnen der Systemsteuerung abgerufen werden. Wenn es abgerufen wird, muss Schwerpunkt auf das neu eröffnete Panel platziert werden.

Nun, ich glaube wirklich, der Titel sollte anklickbar sein, speziell wenn der Inhalt des Elements wird geladen mit AJAX (genau wie ein tabview Ansatz), aber die Realität ist, dass manchmal der Entwickler (sollten) / (wollen) die Kontrolle zu anpassen, dass das Verhalten. Hier ist die Liste der Beispiele , die ich erstellt für ein Akkordeon-Widget-Implementierung auf YUI 2.x basiert, ist es wahrscheinlich eines der am häufigsten verwendeten Komponenten aus dem sprudelnden YUI-Erweiterung.

Wir hatten einen Fall, wo die 'label' des Akkordeons wurde ein Link zu einer vollständigen Blog-Eintrag, und so könnte nicht Akkordeon-anklickbar. In diesem Fall, schrieben wir ein Symbol in der Quelle mit js um den Job zu erledigen. Vorausgesetzt, das Symbol ist hinreichend groß und / oder kommt mit einer accesskey, sehe ich nicht ein großes Problem ...

Akkordeon steuert Server Zweck der Montage viel Inhalt in weniger Platz. Da es sich um eine visuelle Sorge, wäre es für einen Screen-Reader in Ordnung, lesen Sie einfach den gesamten Inhalt und die Tatsache ignorieren, dass es wie eine Ziehharmonika wird visuell angezeigt. Es genügt, ein Symbol, um anklickbar sein, um eine Platte zu erweitern. Es könnte eine Konfigurations-Option, damit das ganze Etikett zu einem Panel zu erweitern, oder es kann bis zur Umsetzung Entwickler überlassen werden, um einen Listener auf dem Etikett, dass eine öffentliche "offen" oder "expand"-Funktion, um die Funktionalität hinzufügen Anrufe zu befestigen.

Nur eines Akkordeons denken als Registerkarten anzeigen. Das gesamte Panel-Label-Bereich sollten anklickbar sein, aber wenn es enthält weitere Steuerelemente (z. B. ein "entlassen" oder "Schließen"-Button) Ich schlage vor, nur das Etikett (Text) anklickbar sein, oder zumindest die clikable Bereich nur ausbauen bis zur interaktiven Kontrollen (dh für eine Beschriftung mit einem Button, der Bereich oberhalb, unterhalb und "danach" auf die Schaltfläche sollte angeklickt werden).

Lösen der Entwurf Pattern Ein Kommentator stellte die künstlichen Einschränkungen der Umfrage (eine faire Polizist, wenn Sie mich fragen):

Ich wusste nicht, wie diese Umfrage. Die Fragen waren nicht flexibel genug. Als Designer / Entwickler, glaube ich, alle Elemente der Benutzeroberfläche müssen, um bestimmte Website oder Web-Anwendung zugeschnitten werden. Asking Schwarz-Weiß-Fragen keinen Raum für die offensichtlichen Unterschiede zwischen den Projekten. Einige Projekte brauchen eine feste Regel, während die gleiche Regel könnte völlig ungeeignet für eine andere Anwendung. Zum größten Teil konnte ich von beantwortete jede Frage mit einem "es kommt" führen.

Seien Sie versichert, dass das Muster wird nur sanft zu empfehlen und die YUI-Code wird flexibel und leistungsstark. Die Umfrage wurde nicht entworfen, um der Wahlmöglichkeiten der Menschen beschränken, sondern um Meinungen und Vorlieben zu sammeln, so auch Rückmeldungen über nicht mit Hard-und-schnell Regeln nützlich ist. Wir haben eine Beta-Version der veröffentlichten Akkordeon-Muster in die Yahoo! Design Pattern Library. Wenn Sie möchten, dass weitere Rückmeldung über die Muster, in eine Frei-Form Art und Weise geben, dann schreiben Sie durch oder besuchen Sie die Forum Diskussion.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!