Unterschied zwischen Umriss und Rand

Kennt jemand einen Unterschied zwischen den Eigenschaften "Rand" und "Gliederung" in CSS? Wenn es keinen Unterschied gibt, warum gibt es dann zwei Eigenschaften für dasselbe?

Von: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Die CSS-Gliederungseigenschaft ist eine verwirrende Eigenschaft. Wenn Sie zum ersten Mal davon erfahren, ist es schwer zu verstehen, wie es sich auch nur entfernt von der Randeigenschaft unterscheidet. Das W3C erklärt die folgenden Unterschiede:

1.Outlines nehmen keinen Platz ein.

2.Outlines können nicht rechteckig sein.

Neben einigen anderen Antworten ... hier sind noch ein paar Unterschiede, die mir einfallen:

1) Abgerundete Ecken

borderunterstützt abgerundete Ecken mit der border-radiusEigenschaft. outlinenicht.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}

<div class="border"></div>

<div class="outline"></div>

GEIGE

(Hinweis: Obwohl Firefox die -moz-outline-radiusEigenschaft hat, abgerundete Ecken auf Umrissen zuzulassen, ist diese Eigenschaft in keinem CSS-Standard definiert und wird von anderen Browsern ( Quelle ) nicht unterstützt. )

2) Nur eine Seite stylen

Grenze hat Eigenschaften Stil jeder Seite border-top:, border-left:usw.

Gliederung kann das nicht. Es gibt keine Gliederung: usw. Es ist alles oder nichts. (siehe diesen SO Beitrag )

3) Versatz

Kontur unterstützt den Versatz mit der Eigenschaft Konturversatz . Grenze nicht.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

GEIGE

Hinweis: Alle gängigen Browser outline-offsetaußer Internet Explorer unterstützen

Neben anderen Antworten werden normalerweise Umrisse zum Debuggen verwendet. Opera hat einige nette Benutzer-CSS-Stile, die die Gliederungseigenschaft verwenden, um Ihnen zu zeigen, wo sich alle Elemente in einem Dokument befinden.

Wenn Sie herausfinden möchten, warum ein Element nicht dort angezeigt wird, wo Sie es erwartet haben oder in der erwarteten Größe, fügen Sie einige Umrisse hinzu und sehen Sie, wo sich die Elemente befinden.

Wie bereits erwähnt, nehmen Konturen keinen Platz ein. Wenn Sie einen Rahmen hinzufügen, erhöht sich die Gesamtbreite / -höhe des Elements im Dokument. Dies geschieht jedoch nicht mit Umrissen. Sie können auch keine Konturen auf bestimmten Seiten wie Rahmen festlegen. Alles oder Nichts.

tldr;

Das W3C erklärt die folgenden Unterschiede:

• Konturen nehmen keinen Platz ein.
• Umrisse können nicht rechteckig sein.

Quelle

Umrisse sollten für die Barrierefreiheit verwendet werden

Es sollte auch beachtet werden, dass der Hauptzweck der Gliederung die Zugänglichkeit ist. Setzen Sie es auf Umriss: Keine sollte vermieden werden.

Wenn Sie es entfernen müssen, ist es möglicherweise eine bessere Idee, ein alternatives Styling bereitzustellen:

Ich habe einige Tipps zum Entfernen der Fokusanzeige mithilfe von Gliederung gesehen: Keine oder Gliederung: 0. Bitte tun Sie dies nicht, es sei denn, Sie ersetzen die Gliederung durch etwas anderes, mit dem Sie leicht erkennen können, welches Element den Tastaturfokus hat. Wenn Sie die visuelle Anzeige des Tastaturfokus entfernen, fällt es Personen, die sich auf die Tastaturnavigation verlassen, sehr schwer, auf Ihrer Website zu navigieren und sie zu verwenden.

Quelle: "Entfernen Sie die Gliederung nicht aus den Link- und Formularsteuerelementen", 365 Berea Street

Mehr Ressourcen

• http://outlinenone.com/

Eine praktische Verwendung von Gliederungen befasst sich mit Transparenz. Wenn Sie ein übergeordnetes Element mit einem Hintergrund haben, der Rand eines untergeordneten Elements jedoch transparent sein soll, damit der Hintergrund des übergeordneten Elements durchscheint, müssen Sie "Gliederung" anstelle von "Rand" verwenden. Ein Rand kann zwar transparent sein, zeigt jedoch den Hintergrund des Kindes und nicht den des Elternteils.

Mit anderen Worten, diese Einstellung hat den folgenden Effekt erzeugt:

outline: 7px solid rgba(255, 255, 255, 0.2);

Vom W3-Schulgelände

Mit den CSS- Rahmeneigenschaften können Sie den Stil und die Farbe des Rahmens eines Elements festlegen.

Ein Umriss ist eine Linie, die um Elemente (außerhalb der Ränder) gezogen wird, um das Element "hervorzuheben".

Die Gliederungseigenschaft "Gliederung" legt alle Gliederungseigenschaften in einer Deklaration fest.

Die Eigenschaften, die festgelegt werden können, sind (in der Reihenfolge): Umrissfarbe, Umrissstil, Umrissbreite.

Wenn einer der oben genannten Werte fehlt, z. B. "Outline: Solid # ff0000;", wird gegebenenfalls der Standardwert für die fehlende Eigenschaft eingefügt.

Weitere Informationen finden Sie hier: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Ein bisschen wie eine alte Frage, aber erwähnenswert ist ein Firefox-Rendering-Fehler (noch vorhanden ab Januar '13), bei dem die Gliederung außerhalb aller untergeordneten Elemente gerendert wird, selbst wenn sie übergeordnet sind (durch negative Ränder, Kastenschatten) , etc.)

Sie können dies beheben mit:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Super unglücklich, dass es immer noch nicht behoben ist. In vielen Fällen bevorzuge ich Konturen, da sie nicht zu den Abmessungen eines Elements beitragen, sodass Sie beim Festlegen der Abmessungen eines Elements nicht immer die Randbreiten berücksichtigen müssen.

Was ist doch einfacher?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Oder:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

Es ist auch erwähnenswert, dass der Umriss von W3C die Grenze des IE ist , da der IE kein W3C-Box-Modell implementiert.

Im w3c-Box-Modell schließt der Rand die Breite und Höhe des Elements aus. Im IE ist es inklusive.

Ich habe ein kleines Stück CSS / HTML-Code erstellt, um den Unterschied zwischen beiden zu erkennen.

outlineEs ist besser, potenziell überlaufende untergeordnete Elemente, insbesondere in einen Inline- Container , einzuschließen .

borderist viel mehr für angepasst Block -behaving Elemente.

Geige für Sie, Sir!

Die Gliederungseigenschaft in CSS zeichnet eine Linie um die Außenseite eines Elements. Es ist ähnlich wie Grenze, außer dass:

• Es geht immer um alle Seiten, Sie können nicht bestimmte angeben
• Seiten Es ist kein Teil des Box-Modells, daher hat es keinen Einfluss auf die
  Position des Elements oder benachbarter Elemente

Quelle: https://css-tricks.com/almanac/properties/o/outline/

Als praktisches Beispiel für die Verwendung von "Gliederung" kann der schwach gepunktete Rand, der dem Systemfokus auf einer Webseite folgt (z. B. wenn Sie durch die Links blättern), mithilfe der Gliederungseigenschaft gesteuert werden (zumindest weiß ich, dass dies in Firefox möglich ist , andere Browser nicht ausprobiert).

Eine übliche "Bildersatz" -Technik ist zum Beispiel:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

mit folgendem im CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

Das Problem ist, dass, wenn der Fokus das Tag erreicht, der Umriss 1000em nach links zeigt. Mit Gliederung können Sie die Fokuskontur für solche Elemente deaktivieren.

Ich glaube, dass die IE Developer Toolbar auch so etwas wie einen Umriss "unter der Haube" verwendet, wenn Elemente zur Überprüfung im "Auswahl" -Modus hervorgehoben werden. Das zeigt gut, dass "Gliederung" keinen Platz einnimmt.

Stellen Sie sich Umrisse als einen Rand vor, den ein Projektor außerhalb von etwas zeichnet, da ein Rand ein tatsächliches Objekt um dieses Ding ist.
Eine Projektion kann sich leicht überlappen, aber der Rand lässt Sie nicht passieren.
Manchmal, wenn ich benutze grid+%width, ändert border die Skalierung im Ansichtsport, zum Beispiel füllt ein div mit width:100%in einem übergeordneten width:100pxElement das übergeordnete Element vollständig aus, aber wenn ich border:solid 5pxzu div hinzufüge , verkleinert es das div, um Platz für den Rahmen zu schaffen (obwohl es selten ist und umgehbar!),
aber mit Gliederung hat es dieses Problem nicht, da Gliederung virtueller ist: D Es ist nur eine Linie außerhalb des Elements, aber das Problem ist, wenn Sie den Abstand nicht richtig machen, würde es sich mit anderen Inhalten überschneiden.

um es kurz zu machen:
Umrissvorteile:
Es spielt keine Rolle mit Abständen und Positionen
Nachteile:
hohe Wahrscheinlichkeit von Überlappungen

Unterschiede zwischen Rand und Umriss:

Der Rand ist Teil des Box-Modells und wird daher gegen die Größe des Elements angerechnet. Die Gliederung ist nicht Teil des Box-Modells und wirkt sich daher nicht auf Elemente in der Nähe aus.

Demo:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

Von W3Schools kopiert:

Definition und Verwendung

Ein Umriss ist eine Linie, die um Elemente (außerhalb der Ränder) gezogen wird, um das Element "hervorzuheben".