Fatih Hayrioğlu'nun not defteri » kenar-çizgisi

ie6′da border-color:transparent desteği sağlamak

fatih.hayrioglu — Wed, 29 Jun 2011 21:22:52 +0000

Geçen araştırırken gördüm. border-color:transparent özelliğini İnternet Explorer 7. sürümünden sonra desteklemeye başlamış, yani ie6’da desteklemiyor. Internet Explorer 6’nın son günlerini yaşadığımız bu günlerde küçük bir bilgilendirme olarak geçeceğim bu sorunun çözümünü.

ul li a{
	border-right:1px solid #f00
}

ul li a:hover{
	border-right:1px solid transparent;
}

Ardalanında renk geçişi olan bir menüde menü elemanları arasında kenar çizgisi olduğunu farz edelim. Menünün seçili veya üzerine geldiğinde ise bu kenar çizgini kaldıralım. Kenar çizgisini sıfırlamak kaymaya neden olur. Saydam kenar çizgisi vermek kolay ve güzel çözümlerden biridir. Peki ie6 için ne yapacağız.

*html ul li a:hover{
    border-color: pink;
    filter: chroma(color=pink);
}

* html sadece ie6’nın göreceği bir seçici, ilk olarka bir kenar çizgisi tanımlıyoruz(pink – pembe) sonrada chroma filtresi ile pembe alanları saydam yapıyoruz. Ufak bir düzenleme ile işimizi hallediyoruz.

Ufak bir bilgi ama bir kenarda yazılı olmasında yara var.

Kalın sağlıcakla

Kaynaklar

İnternet Explorer 6 ve 7 için Tablo tr elementine kenar çizgisi atamak

fatih.hayrioglu — Sat, 17 Oct 2009 16:54:06 +0000

Yine bir İnternet Explorer sorunu ile karşı karşıyayız. Bu seferki sorunum ile bir tablo satırına alt kenar çizgisi tanım yapınca karşılaştım.

table{border-collapse:collapse}
table tr{border-bottom:1px solid #000;}

Gayet basit normal bir tanım. Ancak ie6 ve 7 için durum öyle değil. Karmaşık gelmiş olmalı ki bu atamayı uygulamadı. border-collapse:collapse tanımı kenar çizgileri arasında boşluk olmamaısı için kullanıyoruz.

Peki İnternet Explorer 6 ve 7 için nasıl bir çözüm üretmeliyiz. Satıra değilde satırı oluşturan hücrelere kenar çizgisi verirsek sorunumuz ortadan kalkıyor.

table{border-collapse:collapse}
table td{border-bottom:1px solid #000;}

Örneği görmek için tıklayınız.

Kaynak

http://www.csarven.ca/tr-border-trick-for-ie

Dış hat çizgisi(outline) özellikleri

fatih.hayrioglu — Mon, 22 Jun 2009 20:55:46 +0000

CSS2 ile birlikte gelen kutu dışı şekillendirme(outline) özellikleri kenar çizgisine(border) benzer bir özelliktir. Fakat kenar çizgisi özelliğinden iki önemli farkı vardır. İlki outline özelliği kenar çizgisi gibi normal akışı etkilemez. Bir elemana 10px outline değeri atandığında elemanın etrafındaki elemanların üzerine 10px kadar taşar, diğer elemanları ötelemez. İkinci farklılık outline kenar çizgisi gibi dikdörtgen şeklinde değildir.

Outline özelliği kullanıcının o an nereye odaklandığını belirlemek için kullanılır. Tarayıcı arayüzünde kullanıcının nereye odaklandığını bilmek bize birçok avantajlar sağlayacaktır. Erişebilirlik açısından önemli bir özelliktir.

Klavyeden web sitelerini gezen kullanıcılar için önemli bir özelliktir. Bu durumu şöyle anlatırsak daha iyi anlaşılacaktır. Bir site düşünün metin içeriğindeki bağlantıların rengi ve tipi metinler ile aynı olduğunu bağlantıları metinden ayıran hiç bir belirtinin olmadığı durumu, bu durum kullanıcıyı ne kadar zorlayacağını düşünün. Bu gibi durumları engellemek için biz sayfa içindeki bağlantılara, düğmelere ve gezinti elemanlarına normal içerikten ayrı stiller tanımlarız. Benzer şeyleri sadece klavyeden interneti gezmeye çalışan insanlar içinde outline tanımları sağlar.

Şu aklımıza gelebilir; kim sadece klavye kullanarak internette gezer ki. Ama erişebilirlik demek zaten bir sayfaya en fazla kişinin erişmesini sağlamak değil mi?

Şimdi dış hat çizgileri(outline) özelliklerine bir göz atalım.

Dış hat çizgisi biçemi (outline-style)

Dış hat çizgisinin biçemini belirlemek için kullanırız.

Dış hat biçemi none değeri haricindeki değerler için görüntülenir.

none: Dış hat görünmesin anlamındadır.
dotted: Dış hat belirli aralıklarla dizilmiş noktalardan oluşur.
dashed: Dış hat belirli aralıklarla dizilmiş çizgi parçalarından(tire) oluşur.
solid: Dış hat bir çizgi olarak görünür
double: iki çizgi seklinde görünür. İki çizginin kalınlıkları ile aralarındaki boşluğun genişliğinin toplamı outline-width değerine eşittir.
groove: Dış hat tuvale oyulmuş gibi görünür.
ridge: groove’un zıddı; Dış hat çizgisi kabartma gibi görünür.
inset: Dış hat çizgisinin kutunun tamamını tuvale gömülü gibi görünmesine sebep olur.
outset: inset’in zıddı; Dış hat çizgisi kutunun tamamının kabartma gibi görünmesine sebep olur.

Tarayıcı Uyumu:
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+

Dış hat çizgisi genişliği (outline-width)

Atandığı elemanın dışına çizilen hattın kalınlığını belirlemek için kullanırız.

Yapısı: outline-width:
Aldığı değerler: thin | medium | thick | length | inherit
Başlangıç değeri: Medium
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Dış hat çizgisi genişliği border-width gibi CSS uzunluk değerlerini (px, pt, em) ve anahtar kelimeler(thin <= medium <= thick) alır, ancak yüzde değer ve eksi değer almaz.

Tarayıcı Uyumu:
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+

Dış hat çizgisi rengi (outline-color)

Atandığı elemanın dışına çizilen hattın rengini belirlemek için kullanırız.

Yapısı: outline-color:
Aldığı Değerler: color | invert | inherit
Başlangıç değeri: invert
Uygulanabilen elemanlar: tüm elemanlara
Kalıtsallık: Yok

CSS’in desteklediği renk değerlerini kullanabiliriz, hatta invert değerinide kullanabiliriz. invert, rengi tersine çevirir.

Tarayıcı Uyumu:
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+

Dış hat çizgisi (outline)

Dış hat çizgisi(outline) özelliği yukarıda gördüğümüz özelliklerin tek seferde kullanılmasını sağlayan bir kısa yoldur.

Yapısı: outline:
Aldığı Değerler: [ || || ] | inherit
Başlangıç değeri: Tanımlı değildir
Uygulanabilen elemanlar: Tüm elemanlara
Kalıtsallık: Yok

Kenar çizgisi(border) özelliğine benzer bir yapısı vardır. Ancak ayrıldıkları kısım kenar çizgisinde(border) her kenar için bir atama(border-right, border-bottom, vd.) yapılmasına karşın dış hat çizgisinde(outline) böyle bir özellik yoktur. Dış hat çizgisinin(outline) tüm kenarları aynı özellikleri taşır.

Dış hat çizgileri(outline) normal akıştaki boşlukları tamamlamaz. (taşma yapmaz.) diğer elemanların üzerini örter. Dış hat çizgisinin(outline) önemli özelliklerinden biri etrafını çevreleyen elemanlar üzerinde(üzerine örtmek dışında) bir etki yapmamasıdır, bu sayfa planlamadaki problemlerimizi çözmemiz için önemlidir. Problem olan bir elemana dış hat çizgisi(outline) ataması yaptığımızda tam olarak sorunun ne olduğunu göreceğiz ve elamanın tam yerini öğreneceğiz. Bu kenar çizgisi(border) uygulamaktan farklıdır, dış hat çizgisi(outline) uygulandığında dokümandaki normal akış üzerine bir etki yapmayacaktır.

Dış hat çizgileri(outline) satıriçi elemanların etrafına yerleşir. İki satıra kaymış satıriçi elemanlarda dış hat çizgisi dikdörtgen şeklinde olmayacaktır. Bu da kenar çizgisi(border) ile arasındaki farklardan biridir.

Dış hat çizgileri elemana odaklanıldığında görsel bir çıkıntı gibi görünmesini sağlayabilir.

Tarayıcı Uyumu:
Internet Explorer 6, 7(desteklemiyor) 8 (destekliyor)
Firefox 1.5+
Opera 9.2+
Safari 1.3+
CSS 2+

CSS İpuçları – 2

fatih.hayrioglu — Sat, 15 Jul 2006 20:59:09 +0000

CSS ile sayfa planlama ve gelişmiş sayfa tasarımlarında başınıza bir çok hata gelebilir. Bu gayet normal bir haldir. Mesele bu hataları çözmektir.

Hata çözmede izlenecek yöntemlerden bir tanesi elementlere kenar çizgisi(border) atamaktır.

li a {
	border: 1px solid red;
}

Diğer bir yöntemde elemente ardalan rengi(background-color) uygulamaktır.

#icerikalani {
	background-color:#999;
}

Böylece elementin etki alanı görülecek ve hatayı tespit kolaylaşacaktır.

CSS ile Kutu modeli, sorunları ve çözümleri

fatih.hayrioglu — Tue, 25 Apr 2006 21:37:01 +0000

CSS’e geçişte en çok düşündüren konu niye CSS geçelim ve CSS’in avantajları nelerdir? CSS’in avantajı bize web sayfasındaki elemanlara daha fazla müdahele etme imkanı vermesidir. Burada bunun en güzel örneklerinden birini göreceğiz.

CSS tüm HTML elementlerini bir dikdörtgen kutu içine konmuş varsayarak ona göre pozisyonları ve boyutlarını konrol eder. Bu elementler her zaman bir padding, margin, border ve içerik alanını içerir. Aşağıdaki şekle bir bakınız:

Margin’ler her zaman transparandır. Border’lar üç şekilde( solid, dashed ve dotted) olabilir. Background sadece border içerisine uygulanabilir, yani padding ve içerik alanı kısmını içerir.

Bir elementin toplam genişliği; sol+sağ marginleri, sol+sağ padding’leri, sol+sağ border’ları ve elementin içeriğini kapsar. Margin’ler, padding’ler ve border’lar opsiyonel elementlerdir fakat başlangıçta bunların değerleri ’0′ olarak belirlenmiştir. Yükseklik içinde durum aynıdır. üst-alt margin değerleri, üst-alt padding değerleri, üst-alt border değerleri ve içerik alanı yükseliği toplamı yükseklik değerini oluşturur.

Box modeli iki elementi bulunur. Blok-level elementler ve inline-level elementler.

Blok-level elementler : Blok-level elementin görünüş formatı bir kutu gibidir. Blok-level elementler inline elementleri ve diğer blok-level elementleri içerebilir. Tipik özellikleri yeni bir satır başlangıcı yapmalarıdır. Örnek: h6, p, li vd.

Inline-level Elementler : Inline elementler bir içerik gibi görünür, diğer bir inline elelementi veye bir metni içere bilir. Genelde yeni satır veya boşluk oluşturmazlar. Örnek: a, strong, span vd.

Tüm kutu modelleri aşağıdaki bölümleri içerir:

İçerik Alanı: Elementin asıl içeriğini oluşturan kısmıdır. Metin ve nesneler içerir.

Padding : Elementin kenarındaki dolgu alanıdır.

Border : Elementin kenarlıklarıdır.

Margin: Elementin kenar boşluklarıdır.

Box Model Sorunu ve Çözümü

W3C’ye göre genişlik(ve yükseklik) değeri içerik alanı değeridir. padding ve border değerleri buna ek olarak toplam kutu genişliğine eklenir. Eğer toplam kutu değeri eklenecekse içerik alanı ve etrafındaki padding ve border değerleri toplamıdır.

Buraya kadar çok güzel ancak tüm web tarayıcıları bu durumu aynı şekilde yorumlamaz. IE’un IE6/strict’den önceki versiyonları yukarıda anlattığımız standart yorumun dışına çıkar, genişlik veya yükseklik değeri tüm kutu model element değerini ifade eder. Yani tüm padding ve border değerlerini içerir kalan kısmıda içerik alanı değeri olarak belirlenir.

#icerik{
    width:200px;
    padding:10px;
    border:5px solid #000;
}

Standart web tarayıcıları bu durumu şöyle yorumlayacaklardır.

200px + 10px sol kenar iç boşluğu + 5px sol kenar çizgisi + 10px sağ kenar iç boşluğu + 5px sağ kenar çizgisi = 230px toplam genişlik

kutu elemetinin genişliği 230px olacaktır.

Ancak IE‘un IE6/strict’den önceki versiyonlar için kutu elementinin genişlik değeri 200px’dir.

Margin(Kenar dış boşluğu) değeri width değerini direk etkilemese de dolaylı olarak etkiler. Kutular arasındaki genişliği hesaplarken margin değerlerinide dikkate almalıyız. CSS ile sayfa yapıların oluştururken kenar dış boğluklarını(margin) da dikkate elmalıyız.

Bu sorunun çözümü için üretilmiş bir çok yöntem vardır. Ancak bence en sağlamı tantek‘in ürettiği koddur ve burada bundan bahsedeceğim.

#icerik{
    width:230px;
    padding:10px;
    border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px;
}

Burdaki ilk genişilk değeri(2. satırdaki) IE’un IE6/strict’den önceki versiyonların yorumlayacağı genişlik değeri, ikinci genişlik değeri(7. satırdaki) ise standart yorumu destekleyen web tarayıcılarının kullanacağı değerdir.

Bu kodlamada son olarak Opera 5 için bir kod ekleyeceğiz.

#icerik{
    width:230px;
    padding:10px;
    border:5px solid #000; /* Bundan sonraki kısmı ie5win sakla */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px;
}
html>body #icerik {
	width:200px;
}

Not: Aynı şeyler yükseklik(height) içinde geçerlidir.