tarihinde Fatih Hayrioğlu

Daha önce her çıkan tarayıcının yeni sürümleri hakkında bir araştırma makalesi yazdım, ancak Google Chrome hakkında yazmak nasip olmadı. Bunun en büyük sebebi Chrome’un çok hızlı sürüm atlaması, derli toplu sürüm bilgilerinin yayınlanmaması ve sürümler arasında çok büyük özellik eklemesi olmaması idi. Ayrıca Chrome’un pazar payınında bu yazının gecikmesinde etkisi olduğunu kabul etmeliyim. 

Google chrome’un hızlı yükselişi ve hız konusundaki insanlara verdiği izlenim kısa sürede kendinden bahsettirdi.  Son tarayıcı kullanım oranlarına göre Google Chrome en hızlı yükselen tarayıcı oldu ve kullanım oranını %6,73 oldu.

Arayüz geliştiricileri için tarayıcılar ve sürümleri çok önemlidir. Her sürüm incelemek ve sürüm yeniliklerinden haberdar olmak her arayüz geliştirici için şarttır. Arayüz geliştiricinin aklının bir köşesinde tarayıcı uyumluluğu bilgisi olmalıdır. Bu bize kod yazarken hız kazandıracaktır ve web mecrasının gelişimi hakkında bilgi sahibi yapacaktır.

Gelelim sonunda kendisini yakaladığım Google Chrome 5 Beta’dan bahsetmeye.

  • %35’e varan hızlanma. Google Chrome 5 beta test sonuçları mevcut tarayıcıların en hızlısı olduğunu gösteriyor. Google %35’e varan hızlanma olduğunu söylüyor. Geliştirilen javascript V8 motorunun bunda etkisi büyük. http://www.youtube.com/watch?v=_oarMXGq3gI

  • Google Chrome Senkronizasyonu.Google Chrome senkronizasyon ekranından Favoriler, Özellikler ve Temaları senkron kullanabilmemiz sağlanıyor. Google kullanıcı bilgileri ile bu imkanını sağlaması diğer tarayıcılara göre bir avantaj. Google Dokümanlarımda bu senkronizasyonunu yaptığım dosyaların bulunması güzel bir ayrıntı. Ekranın yarı İngilizce yarı Türkçe olması ilginç.

    google chrome

  • Google Chrome 5 Adobe Flash plug-ini bütünleşik geliyor. Google bu hareketi ile Apple’a nazeremi yapıyor bilinmez ama html5 ve flash tartışmalarının gerçekleştiği şu günlerde ileriye dönük düşünüldüğünde Google’un bu kararının altında bir şey aramak gerekir gibime geliyor.

    google chrome

  • Yakınlaştırma(zoom) ayarlarınızı aklında tutuyor.Bir siteye girdiğinizde ctr+ ve ctrl- ile yakınlaştırma işlemi yapıp kapattığınızda ve siteye daha sonra tekrar girdiğinizde daha önce yaptığınız yakınlaştırma ayarları ile geliyor site. Sıklıkla takip ettiğiniz bir sitede devamlı aynı işlemi yapma sıkıcılığından bizleri koruyor. Bu özellik Firefox ve Opera’da vardı.

  • Geçmişten özel öğeleri silmek. Geçmişi görüntüle(ctrl+h) sayfasında düzenle diyerek sadece istediğimiz link veya linkleri silebilme imkanı eklenmiş.

    google chrome

  • Yeni Favorileri düzenleme sayfası. HTML tabanlı yeni favoriler sayfası eskiye nazaran linklerimiz daha iyi organize etmemizi sağlıyor. Eklentiler ile daha zengin hale getirilebilir
  • Eklentileri Kaldıra bilme Özelliği. Adres çubuğuna chrome://plugins/ yazıp entera basınca gelen ekrandan istediğimiz eklenti veya eklentileri kaldırabiliyoruz. Ayrıca Gizli Pencere’de kapalı gelen eklentileri istersek açabiliyoruz. Bu ekrana direk erişemememiz galiba yanlış birşey yapmamızdan korktuğu için gizlenmiş.
  • Standart geolocation. Daha önce Google Gear ile sağlanan location bilgileri özelliği şimdi HTML 5 geolocation özelliği kullanılıyor. Google Maps sitesine gidip yakınlaştırma seçeneklerinin üzerindeki halkaya tıkladığımızda bize lokasyonumuzun, yani yerimize ait bilgilerin isteyen sitelerin kullanıına açılıp açılmayacağını soran bir mesaj çıkacaktır. Bu özelliği etkinleştirdiğimizdee tarayıcımız bizim yerimiz hakkındaki bilgileri açacaktır. Benzer özelliği kullanan sitelerde bu özelliği kullanılabilecek. Böylece siteler bizim yerimize göre uygulamalar yazabilecektir.  Gelecekte bir çok imkan sağlayacak bu özellik bir bakıma kullanıcı mahremiyetini ihlal etsede kullanıcıyı düşünene gerçek projeler için güzel bir özellik.
  • Çeviri Hizmetini Elle ayarlaya Bileceğiz.Eskiden zorla çevir mesajlarından bıkan benim gibi kullanıcıları düşünerek bu otomatik çeviri mesajını bizim kontrolümüze vermişler.
  • Uzantıların yerlerin değiştire bilme imkanı sağlıyor.

Sonuç

Yukarıda sizlere Chrome 5 (Beta) ile gelen yeni özellikleri aktarmaya çalıştım. Genel olarak Googel Chrome’u değerlendirirsem. Öne çıkan en büyük özelliği hızlı olması, bir çok insan için bu tek başına bir tercih sebebi. Görselliği ile tarayıcı alemine yeni bir stil kazandıran Google Chrome diğer tarayıcılarında kendini taklit etmesi ile birlikte yakında tüm web alemine kabul ettirecek gibi. Firefox’dan en büyük eksikliği olan eklenti desteği bir önceki sürümde geldi.

Genel özellikleri değerlendirildiğinde Google Chrome’u seçmek gayet mantıklı. Ama benim ilk İe karşıtı göz ağrım Firefox’u bırakmam o kadar kolay değil, tabi birde FireBug’ı düşününce biraz zor gibi. Ama aynı şeyi normal kullanıcılar için söyleyemiyeceğim, normal kullanıcı için Googel Chrome tercihi gayet makul.

Web geliştiricileri için standartları destekleyen ve hızlı güncellenen her tarayıcı web alemine renk katar, ie gibi ömür törpüsü tarayıcıları bu durumun dışında tutmalı. 

Kaynaklar

tarihinde Fatih Hayrioğlu

Bu sorunla neredeyse 4-5 kere karşılaşmışımdır. En son yaptığım projede karşılaşınca yazmaya karar verdim. Sorunu açıklamaya çalışayım; postion:relative uyguladığımız elemanların(li) içinde postion:absolute kullanarak eklediğimiz elemanlar sıralı elemanlarının altında kalıyor. Genelde bu durumla liste(li) elemanı içinde üzerine gelince açılan bir alan(menü) açtırmak istediğimizde karşılaşıyoruz. Basit bir örnek ile durumu gösterelim.

.anaKatman {
    position: relative;
    width: 300px;
    border: 1px solid black;
}

.acilanBolum {
    position:absolute;
    left:0;
    width: 150px;
    border: 1px solid red;
    background: gray;
    z-index: 1000;
}

HTML kısmı

<div class="anaKatman">
    <div class="acilanBolum">
        Curabitur dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus accumsan sollicitudin augue, vel sollicitudin mi varius sed. Proin in erat sit amet dolor tincidunt scelerisque eget nec felis. Curabitur dapibus lacus elit. Maecenas nec ligula ipsum.
    </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis. Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.
</div>

<div class="anaKatman">
	Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>
<div class="anaKatman">
	Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>

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

Firefox’da yukarıdaki gibi sorunsuz görünüyor.

Üstte kalmasını istediğimiz katmana(acilanBolum) z-index:1000 değeri vermemize rağmen alttaki katmanın altında kalmaktadır İnternet explorer 6 ve 7 sürümlerinde. 

Çözüm için aşağıdan yukarı doğru artan z-index değerleri yazılmalıdır. Ben ardışık z-index değerleri atayarak yapıyorum bunu. Sırası ile z-index:1, z-index:2 ve z-index:3 değerlerini atıyorum aşağıdan yukarı doğru. Eğer araya bir eleman girme ihtimali varsa aralıklı verin değerleri 10, 20, 30 gibi.

HTMl kodunu aşağıdaki gibi değiştirince sorun çözüldü.

<div class="anaKatman" style="z-index:3">
<div class="acilanBolum">
	Curabitur dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus accumsan sollicitudin augue, vel sollicitudin mi varius sed. Proin in erat sit amet dolor tincidunt scelerisque eget nec felis. Curabitur dapibus lacus elit. Maecenas nec ligula ipsum.
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis. Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.
</div>

<div class="anaKatman" style="z-index:2">
Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>
<div class="anaKatman" style="z-index:1">
Pellentesque sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer imperdiet dictum interdum.
</div>

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

Kaynaklar

tarihinde Fatih Hayrioğlu

Geçen gün Kadir Günay bana sormuştu bu konuyu benim aklımda da css ile bir çözümü olduğu ancak ie6 ile sorunu olduğu kalmıştı. Biraz araştırdım ie6 ile sorunu yok, var ama ufak tefek. Araştırmışken birde makale yazayım herkes yararlansın dedim.

İlk harfi büyük paragraflar oluşturma işi aslında dergilerde sık uygulanan bir yöntemdir. Genelde dergilerin başlangıç paragrafının ilk harfi 2 veya daha fazla satır yüksekliğinde oluşturarak farklı ve güzel bir görünüm kazandırırlar. Bu durumu biz css ile yapabiliyoruz. 

Biz bu görüntüyü first-letter seçicisi ile elde edebiliyoruz. Hatta bu seçicinin adı drop caps-ilk harfi büyük harf seçicisi diyede geçiyor. Bizim için en büyük avantajı ie6 dahil tüm tarayıcıların bu özelliği desteklemesi.

:first-letter seçicisini tanımlanabilen özellikler listesi;

  • font özellikleri
  • color özellikleri
  • background özellikleri
  • text-decoration
  • vertical-align (float değeri none ise)
  • text-transform
  • line-height
  • margin özellikleri
  • padding özellikleri
  • border özellikleri
  • float
  • text-shadow
  • clear

İlk Denememiz

HTML kodlarımız

<p class="introduction">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

CSS kodlarımız

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font-size:4.2em;
	float: left;
	line-height: 1em;
	margin: 0.13em 0.13em 0.13em 0;
}

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

Firefox’da yukarıdaki görüntüyü elde ederken

İnternet Explorer’da yukarıdaki gibi bir görüntü elde ederiz. Dikkat ederseniz bir explorerda L harfi yukarıya daha yakın.

Sorunu gidermek için line-height değerini 1em olarak atıyoruz. Farklı line-height değerleri ile padding uygulamalarında ie 6 ve 7’de sorun çıkıyor, line-height değerini 1 em’de tutmak mantık en azından ie için 1em yapmak gerekiyor.

Fark stillerde uygulamalar yapabiliriz.

İlk harfi font-face ile özel bir yazı tipi ile oluşturarak güzel bir görüntü elde edebiliriz. Yazı tipini(PaladinFLF) http://www.fontsquirrel.com/fontface sitesinden aldım.

@font-face {
	font-family:'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4.2em/1em 'PaladinFLFRegular', Arial, sans-serif;
	float: left;
	margin: 0.13em 0.13em 0.13em 0;
}

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

İşe Biraz daha renk katalım

İlk harfin etrafına kenar çizgisi atayıp ardalan rengini değiştirelim.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4.2em/0.6em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	border:3px solid #fff;
	padding:0.13em;
	background-color:#F30;
	line-height:1em;
}

HTML kodları

<p class="introduction">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>

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

Ardalan Resmi ile

Harfin ardalanına bir resim koyup üzerine harfi koymayı deniyorum.

 @font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	padding:0.4em 0.5em 0.4em 0.3em ;
	background-color:#F30;
	background:url(t.jpg) 0 0 no-repeat;
	text-shadow:2px 2px 2px #999
}

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

Firefox ile yukarıdaki gibi güzel bir sonuç elde ediyoruz. Ancak İnternet Explorer’da sorun yaşıyoruz. 

Bu duruma çözüm üretmek için bir kaç yol var. İlki resmi direk içeriğe ekleyip float:left ile sola yaslayarak çözmek 

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction img {
	float:left;
	margin-right:0.8em
}

HTML kodu

<p class="introduction"><img src="t1.jpg" width="93" height="100" />empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Velit esse cillum dolore eu fugiat nulla pariatur</p>

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

Diğer bir yöntem bu harfi span içine alıp background olarak tanımlamaktır.

CSS3 ile ekstra kod kullanmadan

Sayfamızın ilk paragrafının ilk harfine uygulama yapıyoruz. first-child seçicisi bu imkanı bize sağlar. ancak bu özelliği ie < 9 desteklemiyor.

p:first-child:first-letter{
  font-size: 4.2em;  
  float: left;  
  line-height: 1em;  
  margin: 0.13em 0.13em 0.13em 0;
}

Kaynaklar