Fatih Hayrioğlu'nun not defteri

Firefox 3.5 çıktı

Fatih Hayrioglu — Fri, 10 Jul 2009 05:52:35 PDT

Daha önce Firefox 3.1 yenilikleri adlı bir makale yazmıştık. Ancak sonra Mozilla bu sürümü biraz daha geliştirip biraz daha özellik ekleyip Firefox 3.5 diye sundu bizlere. Yukarıdaki video’da aslında bir çok şey açıklanmış. Ama yinede biz bir kaç cümle ile de olsa bir şeyler yazalım.

Önceki makaleden

Geolocation
@font-face desteği
HTML 5 Video ve Auido Desteği Bu özellik sayesinde video üzerine sağ tıklayıp kaydet diyerek kaydedebiliyoruz. Video ve müzik eklemek için flash’a gerek yok artık.
Adres Bar yenilikler
Yeni Javascript Motoru – TraceMonkey
XHR

Önceki makalemde bahsetmediğim kısımları burada sizlerle paylaşmak istiyorum.

Yeni Kapatılan Pencereler

Birçoğumuz yaşamışızdır, kapattığımız Firefox penceresini tekrar geri getirmeyi. Bu aslında "Yeni kapatılan sekmeler" olarak vardı ancak şimdi pencere olarakda önceki pencereler dönebiliyoruz.

Yeni Görünümlü Gizlilik Sekmesi

Gizli(Private) Sekme özelliği sayesinde gezdiğimiz sitelerin çerezleri siliniyor ve girdiğimiz siteler hakkında bilgiler toplanmıyor. Google Chrome, Safari ve IE8′deki bu özellik Firefox 3.5 ile birlikte geliyor. Firefox 3.5′de bu özelliği Tools – Start Private Browsing deyip balta biliyor ve sonra işimiz bitincede Tools – Stop Private Browsing tıklamamız yeterli. Ctrl + Shift + P kısa yolu yardımı ile daha kolay yapabiliyoruz.

Daha gelişmiş "Geçmişi Sil" Seçenekleri

Geçmişi sil özellikleri arttırılmış. Artık geçmiş 1 saat, 2 saat, 4saati veya bu günü sil diye biliriz. Her şeyi sil seçeneğide mevcut.

Bu siteyi unut özelliği

Bu özellik sayesinde bir daha girmeyeceğimiz sitenin ön bellekteki bilgilerini silebiliyoruz. Sun domain bilgileri buna dâhil değil.

Daha Gelişmiş Sekme Özellikleri

Diğer tarayıcılarda olan sekme ekleme düğmesi Firefox 3.5′e de eklenmiş durumda. Ayrıca Her sekmeyi kendi başına tek olarak görmek ve çalıştırmak için sekmeyi çekip çıkarmak yeterli.

Firefox İkonunu Yeniledi

Firefox 3.5 ile birlikte ikonunu da yeniledi.

Firefox 3.5 indirmek için tıklayınız.

Kaynaklar

http://www.dkszone.net/2009/06/new-features-in-firefox-35.html
http://www.youtube.com/watch?v=k5Zbc-Rg6e8
https://developer.mozilla.org/en/Firefox_3.5_for_developers (web geliştiriciler için yenilikler)
http://www.maximumpc.com/article/features/9_amazing_new_features_firefox_35
http://www.marcozehe.de/2009/06/26/new-accessibility-features-in-firefox-3-5/ (erişebilirlik açısından)
http://osrevolution.com/os-software/firefox-35-features-review (10 özellik)

İlgili Yazılar:

Dış Hat Çizgilerini(outline) Kaldırmak

Fatih Hayrioglu — Wed, 24 Jun 2009 02:01:58 PDT

Ben bu konuyu aslında dış hat çizgilerini kaldırmak olarak adlandıracaktım. Sonra bu konudan kitapta bahsettiğim halde sitemde bahsetmediğimi fark ettim ve dış hat çizgisi özellikleri adlı bir önceki makaleyi yazdım. Sonra da bu makaleye geçtim. Ancak biraz araştırınca, aslında dış hat çizgilerini kaldırmayı savunanlar ve karşı çıkanlar diye iki grup var. Kaldıralım diyenler ne için kaldıralım diyor kaldırmayalım diyenler ne için kaldırmayalım diyorlar inceleyip göreceğiz. Bir ara yol bulabilirmiyiz?

Kaldıralım diyenler.

Kaldıralım diyenler genelde dış hat çizgilerinin oluşturduğu kesikli gri çizgiden rahatsız olanlar. Bunda en çok son zamanlarda gelişen metin yerine resim koyma metotlarınında etkisi var. Aşağıda benimde kullandığım metin yerine resim koyma metodunu kullanarak yaptığım örnekler.

text-indent:-9999px ile görünmez yaptığımız metinleri outline ile görünür hale getirdiğimizde pek hoş görüntüler ile karşılaşmayız.

Firefoxda böyle bir sorun var iken ie ve google chrome’da sadece elemanın çevreleyen bir çizgi görünmektedir. Opera ve Safari’de ise tab ile sadece sayfa içindeki form elemanlarında gezebiliyoruz.

Bana burada kötü görünen metin yerine resim kullandığımız menü elemanlarını seçince sola doğru uzayarak çıkan kesikli çizgi yoksa ie ve chrome daki gibi elemanı saran kesikli çizgi bence kötü görünmüyor. Firefox’daki bu sorunu çözmek için bir kod var.

a{visibility:hidden}

tanımı ie ve chrome gibi göstermesini sağlıyor.

Bide bu çizgileri hiç görmek istemeyenler var. Bunu engellemenin en kolay yolu outline:none veya outline:0 tanımlarıdır.

a{outline:none}

Bu tanım bir çok css sıfırlama tekniğinde yer almaktadır. Örneğin Eric Meyer‘in sıfırlama tekniğinde. Bu yöntem bir çok yerde çözüm olarak sunulmaktadır. Kaynaklar kısmındaki linkler bunlardan bir kaçı.

Kaldırmayalım diyenler

Kaldırmayalım diyenlerde bu özelliğin erişebilirliği arttırmak için çıkarıldığını ve sadece klavyesini kullanan kullanıcılar için elzem bir özellik olduğunu belirtmektir. Eğer sitelerimizi erişebilir yapacaksak ve bunun için mesai harcayacak isek. Bu özelliği sıfırlamak mantıklı olmayacaktır.

Örneğin cnnturk.com sitesine Firefox ile girince sadece klavye kullanarak siteyi gezmeye çalışın. Bu sizi zorlayacaktır, çünkü tab’a her bastığımızda nerede olduğumuzu kestirmekte zorlanıyoruz. Burada tek yardımcımız alttaki tarayıcı çubuğunda her tab tuşuna bastığımızda bağlantıdan bağlantıya geçişlerde durum çubuğunda bağlantıların gösterilmesidir.

a {color: #004276; text-decoration: none; outline: none; }

tanımı nedeni ile dış hat çizgileri bize yardımcı olmayacaktır.

Şimdi webaim.org/ adresine girince klavyeden siteyi gezin. Bu sitede outline değeri standart bırakılmış ve ayrıca odaklanmalar için ayrı bir tanım yapılmıştır.

a:active, a:focus, a:hover {
    background-color:#FFFFCC;
    color:#BF1722;
    text-decoration:underline;
}

Tanımları yardımı ile odaklanılan bağlantılar daha belirgin hale getirilmiştir. Böylece klavyesi ile siteyi gezmeye çalışan insanlara rahatlık sağlanmış olur.

Biz zaten klavye ile dolaşamıyoruz, faremizle takılıyoruz. Evet bir çok insan web sitelerini gezerken klavye kullanmıyor olabilir, ama bazen fare kullanan insanlar bile kısayol için klavye kullanıyor ve erişebilirlik için sadece klavye kullanan insanları göz ardı edemeyiz. Ayrıca web2.0 ile İnternet ortamına taşınan programlarda(google reader, google dokümanlar vb.) klavye kısa yollarından yararlanılmaktadır. Web mecrasında ileride daha etkin bir klavye kullanım oranlarına ulaşabiliriz.

Sonuç

Sonuçta her iki görüşü savunanlar için bir çözüm üretmeye çalışırsak;

http://www.fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/ makalesinde anlattığımı örnek üzerinden devam edelim.

yukarı görüldüğü gibi bir sonuç çıkıyor. Kare olan menülerde o kadar kötü görünmüyor, ama buradaki gibi oval köşeli olunca outlinr çizgileri daha kötü bir görüntüye neden oluyor.

Çözüm önerimiz şu outline’ı kaldıralım, ama klavye kullanan kişiler içinde bir çözüm üretelim. Farenin üzerine geldiği hali(:hover) klavyenin tab’ı ile geldiğinde de uygulayalım. outline’ı kaldıralım tabi.

a.anasayfayaDon {
    display: block;
    width: 80px;
    height: 80px;
    background: url(images/degisen_resim.gif) 0 0 no-repeat;
    text-decoration: none;
    text-indent:-999px;
}
a:hover.anasayfayaDon, a:focus.anasayfayaDon {
    background-position: -80px 0;
    outline:none;
}

Şeklinde görünecektir. Bu görüntüyü Firefox, Google Chrome ve ie8′de aldım.

:focus desteği olmayan ie6 ve 7′de ise onun yerine :active sözde sınıfını kullanacağız. Buna rağmen olmayacaktır. outline özelliklerini desteklemeyen ie 6 ve ie7′de ise hala outline kesikli çizgilerinin görülmesi ilginç. Bunun içinde şöyle bir çözüm yolu var.

a:hover.anasayfayaDon, a:focus.anasayfayaDon, a:active.anasayfayaDon {
    background-position: -80px 0;
    outline:expression(hideFocus='true'); outline:none;
}

expression özelliğini sadece ie destekliyor. Daha önce bahsetmiştik. Bu bir bakıma css içinde javascript çalıştırmak gibi bir şeydir. Bu kod sonunda örneğimiz ie de de çalışacaktır.

Örnek çalışmayı görmek için tıklayınız.

Örnek IE 6, IE7, IE8, FF 3, Google Chrome 2′de test edilmiştir.

Kaynaklar

İlgili Yazılar:

Dış hat çizgisi(outline) özellikleri

Fatih Hayrioglu — Mon, 22 Jun 2009 13:57:10 PDT

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+

İlgili Yazılar:

Firefox’un Negatif Değerli z-index Desteği

Fatih Hayrioglu — Wed, 17 Jun 2009 12:09:47 PDT

Geçen bir projede z-index ile ilgili bir tanım yaptım. Üçlü bir tanımdı sırası ile elemanlara z-index:100, z-index:50 ve z-index:0 değerleri atadım. Aslında 1, 2, 3 diyede tanımlama yapabilirdim, ama araya başka bir eleman girerse diye böyle aralıklı değerler verdim.

Firefox, IE 8, Opera ve Google Chrome’da sorunsuz çalışan kod, IE 6 ve 7′de çalışmadı. Bende daha önce böyle bir sorun ile karşılaşmıştım. Çözüm için z-index:-1 tanımı yapıp çözmeye çalışmıştım, ama bu seferde Firefox 2′da çalışmamıştı o zaman. Firefox 2′de negatif değleri desteklemediğini öğrenmiştim o zaman. Bende bunu için bir düzeltme yazmıştım zamanında. Ama Firefox 3 ile birlikte z-index negatif değer desteği geldiği için şimdi bu sorunu çözülmüş oldu. Bir bilgi olarak bunu bilmek gerek diye düşündüm.

Sonra acaba Firefox 2 için bir düzeltme yazmaya gerek var mı diye düşündüm. Ancak Firefox çok hızlı güncellenen bir tarayıcı ve şu an Firefox 2 kullanımı %5′lerin altına düşmüş durumda bir düzeltme yazmaya gerek yok diye düşünüyorum.

Sonuç olarak şunu söyleyebiliriz ki, gönül rahatlığı ile negatif z-index tanımı kullanabiliriz.

Kaynaklar

İlgili Yazılar:

Windows Vista .net Framework güncelleme sorunu ve çözümü

Fatih Hayrioglu — Wed, 17 Jun 2009 01:53:50 PDT

Windows vista sp 1 kullanıyorum ve yaklaşık 2-3 hafta önce bir güncelleme kurmaya çalıştı ama hata verdi.

Error code:80070645

2-3 haftadır yükleyemeyince bende internette araştırma yaptım. Bir çözüm buldum buraya yazmayı düşündüm.

Çözmek için bir iki işlem yapmak gerekiyor.

İlk olarak yüklü .net framework kaldırmak için http://blogs.msdn.com/astebner/archive/2006/05/30/611355.aspx buradaki .NET Framework cleanup tool aracını yükleyip eski .net framework sürüm veya sürümlerini kaldırmanız gerekiyor. Dosyayı direk http://cid-27e6a35d1a492af7.skydrive.live.com/self.aspx/Blog_Tools/dotnetfx_cleanup_tool.zip buradan indirebilirsiniz.

Kurup eski sürümleri kaldır dedikten sonra bilgisayarınızı yeniden başlatın.

Daha sonra .net Framework’ün son sürümünü indirip yükleyin

http://www.microsoft.com/downloads/details.aspx?displaylang=tr&FamilyID=ab99342f-5d1a-413d-8319-81da479ab0d7

yukarıdaki bağlantıdan indirebilirsiniz.

Son olarak Windows Update penceresini açıp son güncellemeleri yükleyin işlem tamamdır.

Bir güncelleme için bizi bu kadar uğraştıran Microsoft’a ne demeli bilmiyorum. Çıkmadı ki adam akıllı bir işletim sistemi ona geçelim. Ben Apple’dan ümitliyim.

Kaynaklar

No related posts.

CSS ile Ziyaret Edilen Sayfa Bağlantılarına Şekil Vermek

Fatih Hayrioglu — Mon, 15 Jun 2009 07:58:28 PDT

Sözde sınıf ve elementler makalesinde değindiğim bir konu idi bu. Ancak genelde bu özelliği tasarımcılar ve kod yazarları atlıyor. Şimdiye kadar ki hiç bir projemde kullanma gereği duymadım açıkçası. Ama bence kullanılabilirlik açısından önemli bir özellik. Bundan sonraki projelerimde kullanmayı düşünüyorum.

http://www.evalotta.net/ sitedeki uygulamayı görünce çok hoş bir şey olduğu aklıma geldi. Bende bu konuda bir şeyler yazmalıyım diye not ettim. Nasip bu güneymiş.

İnternet tarayıcıları daha önce ziyaret ettiğimiz sayfa bağlantılarını ön belleğinde tutar. Biz ön belleği silmediğimiz müddetçe hafızasında kalır. CSS bize daha önce ziyaret ettiğimiz sayfa bağlantılarının stilini değiştirme imkanı sunar, böylece kullanıcıya sen burayı daha önce ziyaret etmiştin bilgisini verebiliriz. İnternet tarayıcıları ziyaret edilmiş bağlantılara kendileri standart bir stil atarlar. Mesela Firefox altını çizili ve mor renkli yapıyor.

Tarayıcılar bize bu ayrımı gösterir, tabi biz bağlantı tanımları değiştirmediğimiz müddetçe. Biz bağlantıya genel tanım yaptığımızda bu özellik bir bakıma göz ardı edilecektir. Bir çok projede bu tanımlamayı yazpıyoruz.

a{color:#f00;}

Yukarıdaki tanımlama tüm bağlantı tipleri için genel bir tanımdır ve ziyaret edilmiş sayfa stilinide belirler.

Bizim amacımız ziyaret edilmiş bağlantıları farklı stil ile belirterek ayrımı göstermek. Bir çok yerde yazı üstünü çizerek belirlenir.

a:visited { text-decoration: line-through; }

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

Diğer bir yöntemde ardalan resmi koymak. Bu yöntem ile hoş bir görüntüde sağlamış oluyoruz. http://www.evalotta.net/ sitesi buna çok güzel bir örnek.

a:visited {
    padding-right:20px;
    background:url(images/ziyaret_edilmis_baglanti.gif) right top no-repeat;
    color:#666;
    text-decoration:none;
}

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

Benzer yöntemlerle birçok alternatif oluşturulabilir. Ayrıca :before ve :after ile oluşturulan örnekler var ama hala ie6 hayatta olduğu için ve :before ve :after özelliklerini desteklemediği için pek kullanma taraftarı değilim.

Kaynak

İlgili Yazılar:

Sayfa Dibine Yapışık Alt Alanlar(Sticky Footer)

Fatih Hayrioglu — Fri, 12 Jun 2009 05:05:20 PDT

Bir çok sitede karşılaştığımız sayfanın dibine yapışık alt kısımları bu makalede anlatmaya çalışacağım. Bunu hiç javascript kullanmadan sadece css yardımı ile yapacağız.

Site içeriğinin az olduğu durumlarda sayfanın alt kısımları normal akış içerisinde ise yukarı doğru kayacaktır ve hoş olmayan görüntülere neden olacaktır. Bu gibi durumları engellemek için sayfamızın alt kısımlarını sayfa dibine yapıştırmalıyız, böylece sayfa içeriğinin az olması ve çok olması durumunda alt kısmın yerini aynı olacaktır.

Bu işi yapmak için bir kaç türlü yöntem geliştirilmiştir, mantık olarak aynı olan bu yöntemlerde farklı tarayıcılardaki sorunlara çözüm bulmak için farklılıklar içerir. Ben bunlarda bazıları çeşitli projelerimde uyguladım, ancak makaleyi yazarken en iyisi hangisi ise onu yazmaya karar verdim. cssstickyfooter.com‘um anlattığı yöntem benim gördüğüm en iyi yöntem.

Kodumuzu yazmaya başlarsak.

XHTML kodu:


    
		Lorem ipsum dolor sit amet

XHTML kodunda dikkate değer olan kısım içerik alanı ve alt alanı iki farklı bölüm olarak kodlamamız. altAlan ve diğer alanları kapsayan bir kapsayıcı katmandan(#kapsul) oluşuyor kodumuz. Bizim yaptığımız örnekte üst alanı ve iki kolonlu içerik kısmını kapsayıcı katman içine alıyoruz.

CSS Kodu

html, body, #kapsul {height: 100%;}
body > #kapsul {height: auto; min-height: 100%;}
#icerik {padding-bottom: 133px;} /* altAlan yukseligi ile ayni olmali */
#altAlan {
	position: relative;
    margin-top: -133px; /* altAlan yuksekliginin eksi degeri */
    height: 133px;
    clear:both;
}

Buradaki 133px tanımına dikkat etmemiz gerekiyor. 133px altAlan yüksekliğidir ve 3 yerde birden aynı değeri kullandığımıza dikkat edeniz.

Kodu incelersek birinci ve ikinci satırda yüksekliklerin tüm alanı kapsaması için farklı tarayıcılar için %100 tanımını yapıyoruz.

3. satırda alta yapışık alan kadar padding değeri vererek içerik kısmının alt kısmın altında kalmasını engelliyoruz.

4-8 satır arasında alt alan tanımlarımızı yapıyoruz. Göreceli konumlandırdığımız alanı içerik alanında padding-bottom değeri ile açtığımız boşluğa yerleştirmek için negatif üst kenar boşluğu değeri veriyoruz.

Bu yöntemde float uygulanmış içerik kısmında tam alanı kapsayamama sorunu ile karşılaşıyoruz. Float uygulanmış alanların kapsayamama sorunu çözmek için http://www.fatihhayrioglu.com/float-uygulanmis-elementleri-tam-kapsayamama-sorunu/ makalemiz anlattığımız yöntemi kullanıyoruz.

.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */

Bu sınıfı tanımlıyoruz ve içeriği kapsayan(#icerikAlani) katmana atıyoruz.


    
		Lorem ipsum dolor sit amet

Bu yöntemin ryanfait.com’un yöntemine göre en büyük avantajı bence ryanfait.com’un yöntemindeki anlamsız tampon katmanı gibi bir fazla kodlamadan kaçınış oluyoruz.

Örneği görüntülemek için tıklayınız.

Sorunlar ve Çözümleri

- Benim kullandığım projede body ve üstAlan’daki margin-top değeri sorun çıkardı. Bunun yerine padding kullanarak sorunu çözdüm. Üst kısım body’deki margin-top ve margin-bottom tanımları sorun çıkarıyor, bunun yerine padding kullanın.

- Ayrıca yazı tipi boyutunu büyük kullanmak isteyen kullanıcılarda sorun çıkabileceği söyleniyor. Eğer yazı tipi boyutunu piksel(px) vb. kesin değerler ile belirlerseniz bu tip sorunları engelleyebilirsiniz.

- Son olarakta asp.net ile oluşturulan sayfalarda

elemanı ile kapsanan sayfanızda sorun çıkabilir. Bunu engellemek için kodunuzu

	html, body, form, #kapsul {height: 100%;}

şeklinde değiştirmelisiniz.

Kaynaklar

İlgili Yazılar:

IE 8 için CSS Düzeltmesi(Hack)

Fatih Hayrioglu — Tue, 09 Jun 2009 02:21:41 PDT

İnternet Explorer 8 çıktı ve hızla yayılıyor. Sitemi ziyaret edenlerin %5′i İnternet Explorer 8 kullanıcısı imiş. Bir makalede görmüştüm. İnternet Explorer 8′in hızlı yayılması ile alakalı.

Burada ie8′de css düzeltmesi yapmamız gerektiğinde nasıl bir yol izleyeceğimiz konusunda bir ipucu vereceğim.

	.uyari { color /*\**/: red\9 }

Bir çok yerde bu kodun tek başına ie8 için yeterli olduğu yazıyor. Ama ben test ettiğimde ie7′de bu kodu görüyor. Bunun için

    .uyari{color:blue} /* tum taricilar */
    .uyari { color /*\**/: red\9 } /* ie8 ve ie 7 */
    *+html .uyari{color:blue} /* ie 7 */

Şeklinde bir çözüm işimize yaracaktır.

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

Ayrıca şartlı yorumlar yardımı ile de yapabiliriz.

Ayrıca daha önce bahsettiğimiz ie7 gibi yorumlama kodu var.

Testlerimi ietester ile yaptım.

İlgili Yazılar:

CSS Kod Yazma Düzeni

Fatih Hayrioglu — Wed, 03 Jun 2009 07:23:10 PDT

CSS yazarken bazı kurallar koyarsak ve bu kurallara göre kodumuzu yazarsak bir çok konuda yararını göreceğiz.

Daha hızlı kod yazma: Belli bir standardınız oluşturunca kod yazmak daha hızlı olacaktır.
Birden fazla kişinin çalıştığı durumlarda kolaylık sağlar: Aynı kodlama düzenine sahip olmak beraber çalışmayı kolaylaştırır. Koordinasyonu arttırır.
Daha okunabilir kodlar elde ederiz.
Daha performanslı sayfalar elde ederiz.
Daha sonra kodları güncellememiz gerektiğinde bize kolaylıklar sağlar. Mesela bir projeyi bitirdik 3-4 ay sonra değişiklik geldiğinde düzenimiz standart olduğu için düzeltmelerimizi daha kolay yaparız.

CSS kodu yazarken bazı standartlar oluşturmanın avantajlarından bahsettik yukarıda. Peki bu standartlar nasıl olmalı neler yapmalıyız ki optimum kod elde edelim.

1. CSS doküman indeksini oluşturun

CSS dokümanınız indeksini hazırlayınız. Büyük projelerde tercih edilecek bir husus bence. Şimdiye kadar hiç uygulamadım ama büyük projelerde uygulamanın yararlı olacağını düşündüğüm bir uygulama

/*------------------------------------------------------------------
[CSS Kod indeksi]
1. Body
2. Üst Alan / #ustAlan
2.1. Menü / #menu
3. İçerik Alanı / #icerik
	3.1. Sol Kolon / #solKolon
	3.2. Sidebar / #yanKolon
		3.2.1. RSS / #rss
		3.2.2. Arama / #arama
		3.2.3. Kutular / .kutu
4. Alt Alan / #altAlan
-------------------------------------------------------------------*/

2. CSS dokümanınıza imzanızı atın

Kod yazarının veya yazarlarının imzası ve genel bilgilerini yazarak kodlarımızı başlamalıyız.(Bende bunu ara sıra unutuyorum. Ama unutmamak gerekli)

/************************
************************
MYK Medya - http://myk-medya.com/
yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

3. Seçici isimlendirirken standart ve anlamlı isimler verin

Seçici isimleri ve genel isimlendirmede bir standardı oturtun.

Anlamlı isimler verin. Anlamlı isimler vermek kod yazarken ve daha sonrası için çok büyük kolaylık sağlayacaktır. XHTML kodların nasıl bir anlamı(body, p, form vd.) varsa, kendi oluşturduğumuz seçici isimlerinde bir anlamı olması mantıklıdır.

#maviKutu yerine #haberKutusu veya #haberAlani tanımı daha mantıklı ve anlamlı bir isimlendirmedir.

İsimlendirmede bir standardınız olsun. Benim standardım bu konuda ilk harf küçük, sonraki kelimelerin baş harfi büyük ile başlar ve bitişik yazılır.

#icerikOzu{..}
#solIcerikAlani{..}

Bu benim standardım. Başka türlü standartlarda vardır. Her kesin kendince bir standardı olabilir. Mesela alt çizgiyle ayıranlar var. (-)Tire ile ayıranlar var.

#icerik_ozu{..}
#sol-icerik-alani{..}

Bu standardı herkes kendince yapabilir. Benim önerim aynı projede çalışan insanların aynı kodlama yöntemini kullanması, diğer türlü pek hoş olmuyor. Göz aşina olmayınca bir eksik hissediyor insan kod yazarken.

4. Kısaltma kullanın.

CSS tanımlarında kısaltmaları kullanın. CSS kısaltmaları hakkında daha fazla bilgi için http://www.fatihhayrioglu.com/cssde-kisaltmalar/ okumanızı tavsiye ederim.

font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 15px;

yerine

font: bold 11px/15px verdana, sans-serif;

5. CSS dokümanlarınızı anlamlı bölümlere ayırın.

Büyük projelerde css dokümanlarını birden fazla bölümlere ayırarak daha düzenli ve kolay kodlanabilir dokümanlar elde ederiz.

@import url(/css/iskelet.css);
@import url(/css/fontlar.css);
@import url(/css/renkler.css);
@import url(/css/sifirlama.css);

Ben yukarıdaki yöntemi genelde çok büyük projelerde kullanmayı tercih ediyorum. Normalde ve genellikle tek ve iki css dokümanı ile projeyi bitiriyorum. Performans açısından bu daha iyi ayrıca.

Eğer CSS sıfırlama tekniklerinden birini kullanacaksam Bunu imzadan sonraya yazmak. Yada site genel tanımlarını başa yazmak. YUI CSS Reset ve Eric Meyer‘in ki var mesela.

/************************
************************
MYK Medya - http://myk-medya.com/
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}

/*kapsayamam sorunu */
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu{display: inline-block;}
/* IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu{height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */

6. Her satıra bir tanım yöntemini kullanın

CSS özelliği tanımlarken her satıra bir tanım yazarak daha uygun kod elde edebiliriz.

Ben daha önce her satıra bir özellik tanımı yapıyordum.

#aramaAlani{
    float:left;
    width:265px;
    background-color:#fff;
    border:3px solid #525252;
}

Bu yöntemde kod açık ve görüntü olarak daha kullanışlı görünse de, fazla boşluklar sorun oluşturmaya başladı. CSS kodları çok uzayınca kaydırma çubuğu ile çok aşağılara in yukarı çık zaman kaybına neden oluyordu.

Her Satırda Bir Tanım Yapma Yöntemi

Bende her satıra bir tanım yöntemini kullanmaya başladım. Aslında benim bu yönteme ilk geçme nedenim olan optimizasyonda css kodlarımı optimize ederken fazla boşluklardan kurtulmam gerektiğiydi. Daha sonra bu yöntemin daha avantajlı olduğunu gördüm, ayrıca daha derli toplu kodlar oluşturmama yaradı. Bundan sonra böyle kod yazamaya başladım.

#anaKapsul{...}    
#ustalan{...}    
#icerikAlani{...}    
#solIcerikAlani{...}    
#sagIcerikAlani{...}
#altAlan{...}

Kodlarımızın daha okunabilir olması içinde girintili bir yapıyı tercih etmeliyiz.

#icerikAlani{float:left; clear:left; padding-top:20px;}   
	#solIcerikAlani{float:left; width:647px; margin-right:13px}
		#icerikOzu{float:left; clear:left; margin-top:20px}   
	#sagIcerikAlani{float:left; width:300px; margin:0;}

7. Kodlarınızı yorum satırları ile açıklayıcı hale getirin.

Kodumuzun anlaşılabilir olması için yorum satırları eklemeliyiz. Bölümleri ve özel alanları yorum kodu ile belirleyerek anlaşılabilirliği arttırabiliriz. Böylelikle bölümler arasında daha kolay ayrım yapabiliriz. Kod okunabilirliği daha fazla olacaktır.

#anaKapsul{margin:0 auto; width:960px;}    
/**************************************************** ustalan   */
#ustalan{padding-top:20px;}

/**************************************************** icerikAlani   */
#icerikAlani{float:left; clear:left; padding-top:20px;}

/*sol icerik alani */    
	#solIcerikAlani{float:left; width:647px; margin-right:13px}
		#icerikOzu{float:left; clear:left; margin-top:20px}

/* sagIcerikAlani */

	#sagIcerikAlani{float:left; width:300px; margin:0;}

8. CSS özellik tanımlarını sıralayın.

Özellik tanımlarında sıralama uygulayın. Özellik tanımlarında şablon tanımlarını başta yazmak. CSS tabanlı kodlama yazarken site yapısını oluşturan özellikler(float, width, height gibi özellikleri) ilk sırada yazıp sonra diğer özellikleri yazmayı tercih ediniz.

#solIcerikAlani{float:left; width:647px; margin-right:13px}

Burada bir diğer yöntemde özellikleri alfabetik sıraya göre yazmaktır. Buradaki amaç bir standart oluşturup göz aşinalığı sağlamak ve böylelikle daha hızlı kod yazmaktır.

Sıralayı şöyle yapmak mantıklı olacaktır.

Konumlandırma, boyutlar (width, height, position, float, clear)
Kenar için ve kenar dışı boşluklar ve kenar dışı çizgisi (margin, padding, border)
Metin tanımları (font, line-height, color)
Diğer özellikler

9. Çalışma gruplarınızda ortak standardınızı oluşturun.

Bir projede beraber çalıştığınız insanlarla aynı kodlama düzeninde çalışması çok önemlidir. Projede çalışan kişilerin bir araya gelip ortak bir düzen oluşturmaları ve projede bu düzen üzerine çalışmaları herkes açısından büyük katkı sağlayacaktır. Ayrıca css düzeltmelerinde(hack) de aynı şey söz konusu. Mümkünse aynı css düzeltmelerini kullanmanız ortak çalışılan projelerde size kolaylık sağlayacaktır.

10. CSS Editör araçlarından yararlanın

Daha öncede yazdığım gibi css editörü olarak Adobe Dreamweaver kullanıyorum. Bunun bir kaç sebebi var. Eskiden beri kullana gelmenin verdiği bir el alışkanlığı. CSS ve son sürümde de javascript editör kısımların gayet güzel çalışması.

Gelelim CSS Editörlerinin bizim CSS düzenine katkılarına

10.1 Otomatik tamamlama özelliği bize kod yazarken çok yardımcı oluyor. Bu özellik kod yazma hızımızı arttırıyor ve yanlış yazımları engelliyor.

10.2 Kodların renklendirilmesi de editörün güzel özelliklerinden biridir. Seçici, özellik, tanım ve yorum satırı ayrımı bize göstererek kod ayrımına yardımcı olur ve daha okunabilir kod görünümü sağlar.

10.3 Sık kullandığımız css düzeltmelerini(hack) snippets(dw özelliği) alanına ekleyerek hız kazanabiliriz. Daha hızlı olmak için bu tanımlara bir kısa yol bile atayabilirisiniz.

10.4 Dreamweaver’ın stil dosyalarını standarda oturmak çok kolay.

Edit -> Preferences.. tıklayınca gelen pencereden Code Format kısmını seçince sağ tarafta CSS.. düğmesine tıklayınca CSS doküman formatını ayarlama ekranından css düzenimizi ayarlayabiliyoruz.

Notepad ++ daki hizalama çizgileride çok güzel dw olmaması çok üzücü. DW’da hala tam olarak istedikleri karşılaya bilmiş değil, ama bildiğim en iyi editör.

Sonuç

Burada ben kullandığım ve araştırma sonucu elde ettiğim css düzeninden bahsettim. Bu stadartları kendinize göre değiştirebilir ve kendi stadartlarınızı oluşturabilirsiniz, Amaç stadart ve düzenli bir css kodlama düzenine erişmek. Son olarak örnek bir css dokümanı nasıl olmalıya bir örnek yazarsak:

XHTML kodu:

CSS kodu

/************************
************************
MYK Medya - http://myk-medya.com/
yahoyt.com
fatih hayrioglu
28 Mayis 2009
ie6, ff, opera. chrome, safari
************************
************************/

/************************************************** Genel Tanımlar   */

body{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}

/*kapsayamam sorunu */
    .kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    .kapsayamamaSorunu{display: inline-block;}
    /* IE-mac de bu bolumu sakla \ */
    * html .kapsayamamaSorunu{height: 1%;}
    .kapsayamamaSorunu {display: block;}
    /* IE-mac bu bolumu saklam artik */
/*kapsayamam sorunu */

#anaKapsul{margin:0 auto; width:960px;}    

/************************************************** ustalan   */
#ustalan{padding-top:20px;}
            
/************************************************** icerikAlani   */
#icerikAlani{float:left; clear:left; padding-top:20px;}
    
/*sol icerik alani */    
    #solIcerikAlani{float:left; width:647px; margin-right:13px}
    #icerikOzu{float:left; clear:left; margin-top:20px}
    
/* sagIcerikAlani */

    #sagIcerikAlani{float:left; width:300px; margin:0;}                

/************************************************** altAlan */

#altAlan{clear:left; background-color:#404040; padding:12px; margin-bottom:20px;}

Kaynaklar

İlgili Yazılar:

CSS İpucu 21: CSS ile Seçilen Metinlerin Rengini Değiştirmek

Fatih Hayrioglu — Mon, 01 Jun 2009 07:34:47 PDT

css-tricks.com sitesine her girdiğimde metinleri seçince çok hoş bir görüntü ile karşılaşıyorum. Bence çok güzel. Belkide standart renklerden bıktığım için farklı renkler bana hoş geliyor. Metinleri seçince ardalan rengini ve metin rengini değiştirebilmek çok güzel bence. Özelliğin tek kötü yanı Internet Explorer’un(8. sürüm dahil) desteğinin söz konusu olmaması.

Kodlama çok basit

::-moz-selection {
    background:#c00;
    color:#fff;
}
::selection {
    background:#c00;
    color:#fff;
}

Kodlamanın birinci kısmı(::-moz-selection) mozilla tabanlı yani Firefox için ikinci kısmı ise normal CSS 3 ile birlikte gelen koddur. Webkit tabanlı tarayıcılar ve Opera 9.5 bu kodu destekliyor.

Ayrıca diğer seçicilerede bunu uygulayabiliyoruz. Bağlantılar için farklı bir renk tanımlayalım mesela

a::-moz-selection {
    background:#1259C7;
    color:#fff;
}

a::selection {
    background:#1259C7;
    color:#fff;
}

Örnek olarak bu sitede herhangi bir metni seçince göreceksiniz.

Internet Explore desteklemiyor. Bunun haricinde Firefox 2, Safari, Opera 9.5 ve Google Chrome destekliyor.

Kaynaklar

İlgili Yazılar: