Anahat ve kenarlık arasındaki fark

Herkes CSS 'sınır' ve 'anahat' özellikleri arasında herhangi bir fark biliyor mu? Fark yoksa, neden aynı şey için iki özellik var?

Gönderen: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

CSS anahat özelliği kafa karıştırıcı bir özelliktir. Bunu ilk öğrendiğinizde, sınır özelliğinden nasıl uzaktan bile farklı olduğunu anlamak zor. W3C bunu aşağıdaki farklılıklara sahip olarak açıklar:

1.Outlines yer kaplamaz.

2.Outlines dikdörtgen olmayan olabilir.

Diğer bazı cevaplara ek olarak ... burada aklıma gelen birkaç fark daha var:

1) Yuvarlatılmış köşeler

borderözelliği ile yuvarlatılmış köşeleri destekler border-radius. outlineyapmaz.

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>

VAKTİNİ BOŞA HARCAMAK

(Not: Firefox , -moz-outline-radiusanahatta yuvarlatılmış köşelere izin veren özelliğe sahip olsa da ... bu özellik herhangi bir CSS standardında tanımlanmamıştır ve diğer tarayıcılar tarafından desteklenmemektedir ( kaynak ))

2) Sadece bir tarafı şekillendirin

Sınır tarzı ile her tarafı için özelliklere sahiptir border-top:, border-left:vs.

anahat bunu yapamaz. Anahat yok: vs. Ya hep ya hiç. ( bu SO yazısına bakın )

3) Ofset

Anahat özelliği özelliğiyle dışa kaydırmayı destekler . sınır değil.

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

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

VAKTİNİ BOŞA HARCAMAK

Not: outline-offsetInternet Explorer dışındaki tüm büyük tarayıcılar desteklenir

Diğer cevaplara ek olarak, ana hatlar genellikle hata ayıklama için kullanılır. Opera, belgedeki tüm öğelerin nerede olduğunu göstermek için anahat özelliğini kullanan bazı güzel kullanıcı CSS stillerine sahiptir.

Bir öğenin neden beklediğiniz yerde veya beklediğiniz boyutta görünmediğini bulmaya çalışıyorsanız, birkaç anahat ekleyin ve öğelerin nerede olduğunu görün.

Daha önce de belirtildiği gibi, ana hatlar yer kaplamaz. Kenarlık eklediğinizde, öğenin belgedeki toplam genişliği / yüksekliği artar, ancak bu anahatla olmaz. Ayrıca kenarlıklar gibi belirli kenarlarda ana hatlar oluşturamazsınız; Ya hep ya hiç.

TLDR;

W3C bunu aşağıdaki farklılıklara sahip olarak açıklar:

• Anahatlar yer kaplamaz.
• Anahatlar dikdörtgen olmayabilir.

Kaynak

Erişilebilirlik için anahat kullanılmalıdır

Ana hatların birincil amacının erişilebilirlik olduğu da not edilmelidir. Anahat olarak ayarlamak: hiçbirinden kaçınılmamalıdır.

Kaldırmanız gerekiyorsa, alternatif stil sunmak daha iyi bir fikir olabilir:

Anahat: hiçbiri veya Anahat: 0 kullanarak odak göstergesini kaldırma konusunda birkaç ipucu gördüm. Anahattı, hangi öğenin klavye odağı olduğunu görmeyi kolaylaştıran başka bir şeyle değiştirmediğiniz sürece lütfen bunu yapmayın. Klavye odağının görsel göstergesini kaldırmak, klavye navigasyonuna güvenen kişilere sitenizde gezinme ve siteyi kullanma konusunda gerçekten zor bir zaman verecektir.

Kaynak: "Anahatları Bağlantı ve Form Denetimlerinden Kaldırma", 365 Berea Street

Daha fazla kaynak

• http://outlinenone.com/

Anahatların pratik kullanımı şeffaflık ile ilgilidir. Arka planı olan bir üst öğeniz varsa, ancak üst öğenin arka planının görünmesi için alt öğenin kenarlığının saydam olmasını istiyorsanız, "kenarlık" yerine "anahat" kullanmanız gerekir. Bir sınır şeffaf olsa da, ebeveynin değil çocuğun arka planını gösterecektir.

Başka bir deyişle, bu ayar aşağıdaki efekti yarattı:

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

W3 Okul Sitesinden

CSS sınır özellikleri bir elementin kenarlık stilini ve rengini belirtmek için izin verir.

Bir anahat (sınırları dışında) unsurları etrafında çizilen bir çizgi elemanı "öne" yapmaktır.

Anahat shorthand özelliği, tüm anahat özelliklerini bir bildirimde ayarlar.

Ayarlanabilen özellikler (sırayla) şunlardır: anahat rengi, anahat stili, anahat genişliği.

Yukarıdaki değerlerden biri eksikse, örneğin "anahat: katı # ff0000;", varsa, eksik özellik için varsayılan değer eklenir.

Daha fazla bilgi için buraya bakın: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Biraz eski bir soru, ancak ana hatlarının ebeveynlerinden taşmış olsalar bile (negatif kenar boşlukları, kutu gölgeleri ile) anahattın tüm alt öğelerin dışında görüntüleneceği bir Firefox oluşturma hatasından (halen Jan13'te mevcut) bahsetmeye değer , vb.)

Bunu şu şekilde düzeltebilirsiniz:

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

Süper talihsiz hala sabit değil. Çoğu durumda ana hatları tercih ederim, çünkü bir öğenin boyutlarına eklenmezler, böylece bir öğenin boyutlarını ayarlarken her zaman kenarlık genişliklerini göz önünde bulundurmak zorunda kalmazsınız.

Sonuçta, hangisi daha basit?

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

Veya:

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

IE, W3C kutu modelini uygulamadığından, W3C'nin anahatlarının IE'nin sınırı olduğunu da belirtmek gerekir .

W3c kutu modelinde, kenarlık elemanın genişliği ve yüksekliğinden bağımsızdır. IE'de kapsayıcı.

Sadece ikisi arasındaki farkı görmek için css / html kodu küçük bir parça yaptım.

outlinepotansiyel taşan alt elementleri, özellikle bir satıriçi konteynere dahil etmek daha iyidir .

borderblok davranış elemanları için çok daha uyarlanmıştır .

Senin için keman efendim!

CSS'deki anahat özelliği, öğenin dışına bir çizgi çizer. Bunun dışında sınıra benzer:

• Her zaman tüm tarafları dolaşır, belirli
• taraflar Kutu modelinin bir parçası değildir, bu nedenle
  elemanın veya bitişik elemanların konumunu etkilemez

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

"Anahat" kullanımının pratik bir örneği olarak, bir web sayfasında sistem odağını izleyen soluk noktalı kenarlık (örneğin, bağlantılar arasında sekerseniz) anahat özelliği kullanılarak kontrol edilebilir (en azından Firefox'ta yapabileceğini biliyorum) , diğer tarayıcılarda denenmedi).

Yaygın bir "görüntü değiştirme" tekniği, örneğin:

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

CSS'de aşağıdakilerle:

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

Sorun, odak etikete ulaştığında, anahattın 1000em sola doğru gitmesidir. Anahat, bu tür öğelerdeki odak ana hattını kapatmanıza izin verebilir.

Ben IE Geliştirici Araç Çubuğu da "seçin" modunda inceleme için öğeleri vurgularken anahat "başlık altında" gibi bir şey kullanıyor inanıyorum. Bu, "taslak" ın yer kaplamadığı gerçeğini iyi gösteriyor.

bir projektörün kenarlık olarak çizdiği bir çerçevenin sınır olduğunu düşünün, o şeyin etrafındaki gerçek bir nesne.
bir projeksiyon kolayca üst üste gelebilir ancak sınır geçmenize izin vermez.
kullandığım zaman grid+%width, kenarlık görünüm bağlantı noktasındaki ölçeklendirmeyi değiştirir, örneğin bir width:100%üst öğedeki bir div ile üst width:100pxöğeyi tamamen doldurur, ancak div'a eklediğimde border:solid 5pxdiv'ı kenarlık için yer açmak için daha küçük hale getirir (nadir ve iş
anlaşılabilir !) ancak anahat ile daha sanal olduğu için bu sorun yoktur: D sadece öğenin dışında bir satırdır, ancak sorun düzgün bir şekilde boşluk bırakmazsanız diğer içeriklerle çakışır.

kısa yapmak için:
anahatları artıları:
boşluk ve karışıklık
eksileri ile karışıklık yok :
yüksek çakışma şansı

Kenarlık ve anahat arasındaki farklar:

Kenarlık, kutu modelinin bir parçasıdır, bu nedenle öğenin boyutuna göre sayılır. Anahat, kutu modelinin bir parçası değildir, bu nedenle yakındaki öğeleri etkilemez.

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>

W3Schools'tan kopyalandı:

Tanım ve Kullanım

Anahat, öğeyi "öne çıkarmak" için öğelerin etrafına çizilen (kenarların dışında) bir çizgidir.