outline-offsetBelirtilen miktarda bir elementin sınır kenarından tanımlanmış bir anahat uzaklıklar CSS'deki özellik. Bir sınırdan farklı olan bir anahat, sayfada herhangi bir yer kaplamaz (mutlak olarak konumlandırılmış bir öğe gibi), böylece anahat herhangi bir miktarda kaydırılabilir ve çevreleyen öğelerin konumunu veya düzenini etkilemez.
.example ( outline: solid 2px blue; outline-offset: 10px; )outlineÖzellik kullanılarak tanımlanan anahatlar , genellikle erişilebilirlik için odak halkaları olarak kullanılır. Böylece, outline-offsetözellik, odak halkasının konumunu değiştirmenize izin verir.
Değerler
outline-offset bir tür değeri kabul eder, uzunluk:
0(varsayılan)- Belirtilen bir birimle diğer geçerli uzunluklar (negatif değerler dahil)
Not outline-offsetgibi outline-width, yüzde değerleri kabul etmez.
Anahatın Konumlandırılması
Varsayılan olarak, bir elemanın anahattı, sınırın hemen dışında (veya bir sınır tanımlanmışsa, sınırın çizileceği yerin hemen dışında) çizilir. Bu nedenle, iki kenarlık efekti için anahat ve kenarlığı birleştirmek teknik olarak mümkündür:
Buradan outline-offset, dış hattın konumunu sınır kenarına göre değiştirmek için kullanılabilir. Kaydırıcıyı kullanarak anahatların ofset değerini etkileşimli olarak değiştirmenize olanak tanıyan aşağıdaki demoyu deneyin. Kaydırıcıyı hareket ettirdikçe, ofsetin değeri sayfada görüntülenir:
Yukarıda bahsedildiği gibi, bir outline-offsetsonraki etkileşimli demoda gösterildiği gibi, ana hatları ters yönde (öğenin merkezine doğru) kaydıracak olan negatif değerleri kabul eder. Anahatın -40px ile başladığına dikkat edin:
Yukarıdaki demoyu Firefox'ta görüntülerseniz, ilk başta ana hattın doğru göründüğünü fark edeceksiniz, ancak kaydırıcı ayarlandığında anahat düzgün şekilde işlenmiyor ve yanlış konumda sona eriyor. Öğeyi görünüm dışına kaydırmak, ardından tekrar görünüme geçirmek, tarayıcıyı anahattı doğru konumda yeniden boyamaya zorlar. Bu yalnızca Firefox'ta bir hata gibi görünüyor.
outlineSteno Parçası Değil
Benzer borderözellik, outlinemülkiyet üç özelliklerini temsil eden bir kısaltmadır: outline-color, outline-style, ve outline-width.
Bu outline-offsetnedenle özellik, bu veya başka herhangi bir kısaltılmış özellikte temsil edilmediğinden, tanımlanmış ana hattan ayrı olarak beyan edilmesi gerekir.
İlişkili
- anahat
- sınır
Daha fazla bilgi
- W3C'de dış hat uzaklığı
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
IE için "kısmi" gösterge, IE'nin desteklemediği outline-offset, ancak outlinesteno ve temsil ettiği üç özelliği desteklediği anlamına gelir .
Yukarıda "Ana Hattın Konumlandırılması" bölümünde belirtilen hataya ek olarak, Firefox'ta, öğenin üst sınırını aşan bir alt öğesi varsa (örneğin, negatif kenar boşlukları veya mutlak konumlandırma kullanarak) ana hattın yanlış çizilmesine neden olan bir hata vardır. . Bu nedenle, outline-offsetdeğer, orijinal ana öğe sınırları yerine, taşan alt öğe tarafından oluşturulan genişletilmiş sınıra göre olacaktır. Bunu daha iyi anlamak için, bu CodePen'e, bu Yığın Taşması iş parçacığına ve bu hata raporuna bakın (bu hatayı gönderdiği için Matt Vanes okuyucuya teşekkür edin).