tarihinde Fatih Hayrioğlu

Geçen haftasonu c.tesi günü(28 Temmuz 2012) jstanbul etkinliğinde sunduğum “CSS3 Javascript’ten Rol Çalıyor” makalesidir. Etkinlikte internet erişimim olmadığı için örnekleri gösterememiştim, burada bağlantıları da paylaşıyorum umarım yararlı olur.

Sunuma erişmek isteyenlere sunumun linki.

Bu başlık şöyle çıktı; Hasan Yalçın’ın “Modern Web Tasarımı” kitabı için HTML5 ve CSS3 yeniliklerini bir cümle ile anlatmak istersen ne dersin demesi ile başladı. “Geliştirilen kodlama teknolojilerinde, css3 tasarımcıdan, html5 programcıdan rol çalıyor!” diye bir cümle kurmuştum. Bu cümlenin CSS3 kısmı eksik kaldığını zamanla gördüm. CSS3 sadece tasarımcıdan değil Javascript’ten de rol çalışıyor bunu gördüm.

Katman Mimarisi ve Js’in Yeri

  • İçerik Katmanı (HTML)
  • Gösterim Katmanı (CSS)
  • Davranış Katmanı (Javascript)

CSS3 ve HTML5’den önce bir kitapta şöyle bir şema görmüştüm.

Content katmanı Web sayfamızın içeriğini belirler. Web sayfamızda kullandığımız tüm yazılar, resimler, linkler, formlar vs. content kapsamında ele alınır. Content’i belirlemek için HTML kullanılır. Yani Web sayfamızdaki içeriği HTML ile belirtiyoruz. Bu içeriği kullanıcıya sunmak için presentation katmanı kullanılır. Bu katman ile Web sayfasında bulunan içeriği görsel olarak şekillendirip kullanıcıya sunarız. Bu sunumu gerçekleştirmek için CSS kullanılır ve son olarak behavior katmanı ise Web sayfamızın davranışını belirler. Sayfamızda bulunan olaylar, tetiklemeler, işlemler vs. davranış kapsamında ele alınır ve sayfanın davranışını belirlemek için JavaScript kullanılır.

küme

Küme Mimarisi

Genel anlamı ile yukarıdaki mantık doğru olsa da aslında hepsi bir birine bağımlı teknolojiler bunlar ve birbirinden rol çalabiliyorlar.

CSS3 ile birlikte değil aslında CSS2 versiyonunda da bir hareketlilik vardı. :hover Her ne kadar Murat Çorlu :hover’ın bir dinamizm getirdiğini kabul etmese de bence CSS’in sayfa düzeni işine girişmeden önceki en büyük dikkat çekiciliği linklerin :hover etkisine ulaşıp değiştirme imkanıdır.

Javascript’ten Rol Çalan Özellikler

  • :checked Sözde Sınıfı
  • :target Sözde Sınıfı
  • Kardeş Seçiciler (Bitişik ve Genel)
  • CSS3 Animasyon
  • CSS3 Transition
  • :hover Sözde Sınıfı
  • medya sorguları (media query)
  • calc() değeri

İkinci Liste

  • Seçiciler (first-child, last-child, nth-child)
  • CSS3 Transform
  • CSS3 Esnek Kutu Yerleşimi
  • ::selection seçicisi
  • pointer-events

Biz burada tıklama olanağı kazandıran :checked Sözde Sınıfı, :target Sözde Sınıfını ve Kardeş(Siblings) Seçicileri irdeleyeceğiz.

:checked Sözde Sınıfı

CSS ile bize tıklama yakalamayı sağlayan diğer bir özellik :checked sözde sınıfıdır. Normalde checkbox ve radio butonların işaretli olup olmaması durumu için çıkan bu özellik, tıklama yakalama özelliği yardımı ile bir çok uygulama yapımı için kullanılıyor.

radyo butonlar ve işaret kutuları label ile kullanılmaktadır.

<input id="rad1" type="radio" name="rad">
<label for="rad1">Radio 1</label>

for tanımı yardımı ile label ile radyo buton veya işaret kutusuna erişim sağlanır. for ile radyo buton ve işaret kutusu id’si aynı olmalıdır.

input[type="radio"]:checked+label{
	font-weight: bold;
}

Tanımı ile tıklama yakalama işini yapabiliyoruz.

Hemen bunu basit bir gizle göster işini nasıl yaparız onu gösterelim.

<input id="che1" type="checkbox" name="che">
<label for="che1">Radio 1</label>
<div class="icerikAlani">Gizli İçerik</div>

Yukarıdaki koda birde div ekledik. Amacımız bir tıkla bu divi göstermek, eğer açıksa bir tıkla gizlemek.

]
input[type="checkbox"],
.icerikAlani{
	display:none;
}

label{
	color:blue;
	cursor:pointer;
}

input[type="checkbox"]:checked ~ .icerikAlani{
	display:block;
}​

Sadece bu kod yardımı ile gizle göster işini yapabiliyoruz. tilda(~) işareti Genel Kardeş Seçicisi yardımı ile aynı seviyede olan “icerikAlani” sınıfını buluyor ve gösteriyoruz.

target seçicisi

target seçicisi ve CSS’in tıklamaları yakalayabilme yeteneği kazanması. CSS ile tanım yapmak için seçicileri kullanıyoruz. Aslında benzer mantığı jquery ile javascript mecrasına da taşımış durumda. CSS3 öncesinde biz elemanların tıklanmasını CSS ile yakalayamıyorduk. ta ki :target seçicisi gelen kadar. :taget seçicisi bize elemanlara tıklandığını yakalama imkanı sağladı ve artık js ile tıklama yakalamayı beklememize gerek kalmadı.

<dl>
	<dt id="dn1">
		<a href="#dn1">Deneme Başlık</a>
	</dt>
	<dd>Deneme 1 İçerik</dd>
	<dt id="dn2">
		<a href="#dn2">Deneme Başlık 2</a>
	</dt>
	<dd>Deneme 2 İçerik</dd>
</dl>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS kodu;

dt{
	font-weight:bold;
}

dt:target + dd{
	display:block;
}

dd{
	display:none;
}​

:target sözde sınıfının dezavantajı sayfa imlecini ilgili içeriğe kaydırması ve adres barda #tanim ile geçiş sağlanmasıdır. Geri tuşları biraz devre dışı kalıyor.

Kardeş(Siblings) Seçiciler

CSS’in bir diğer sorunu sadece kapsayıcı eleman içindeki elemanlara erişebilmesi.

<p>Deneme metni <span>bir</span></p>
<div class="icerik">Burada içerik olsun</div>

CSS ile sadece bir kapsayıcı eleman içine müdahale edebilirken

p span{
	/* tanımlar */
}

Kardeş seçiciler yardımı ile artık kapsayıcı içinde olmayan elemanlara da erişebiliyoruz.

p + div.icerik{
	display:block;
}

veya

p ~ div.icerik{
	display:block;
}

gibi tanımlar ile DOM’deki aynı seviyedeki elemana erişim sağlayabiliyoruz.

  • Bitişik Kardeş Seçicileri (Bir ufak kardeş)
  • Genel Kardeş Seçicisi

Bitişik Kardeş Seçicileri

Bitişik Kardeş Seçicileri biribiri ardına gelen aynı seviyedeki elementlerden sonra gelenine stil tanımlamak için kullanılır. Tam olarak “Bir Ufak Kardeş Seçicisi” olmalıdır.

Bir örnek verelim bir başlığımız var ve sonrasında ard arda paragraflar geliyor. Biz başlık ile hemen ardından gelen paragrafın arasına mesafe koymak için bu seçiciyi kullanabiliriz.

<body>
	<h2>Başlık 2</h2>
	<p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
	<p>Buraya <em>önemli</em> ve <strong>iyi</strong>kod gir</p>
</body>

Dökümanın yapısı:

Biz burada h2 ve h3 arasında boşluk vermek için aşağıdaki kodu kullanırız:

h2 + p {
	margin-top: 10px;
}

Bu seçiciyi ie7’nin seçicisini destekliyor.

Sonuç olarak konunun başında söylediğimiz gibi CSS, (X)HTML elementlerinin kendi aralarındaki ilişkileri kullanarak bize bir çok avantaj sağlar. Bu sayede bir çok kod yığınından kurtulmuş oluruz ve kodlarımız bir düzene girer. Bu kuralları uyguladıkça önemini daha iyi anlayacağız.

Çocuk Seçicileri ve Bitişik Kardeş Seçicileri‘ni Internet Explorer 7 versiyonundan itibaren desteklemeye başlamıştır. Bu nedenle kullanımı konusunda dikkat etmeliyiz.

Genel Kardeş Seçicisi

CSS2.1 ile birlikte gelen bitiş kardeş seçicilerine benzer bir seçicidir. Bitişik kardeş seçicisine göre daha seçici ve kullanışlı bir seçicidir. Aynı kapsayıcıya sahip elemanların belirtilen elemandan sonraki aynı seviyedeki elemanların tümünü yakalamak için kullanılır. Burada dikkat edilmesi gereken konu belirtilen elemandan sonraki aynı seviyedeki elemanları seçiyor olması. Tanımlama yaparken araya işaret olarak tilde(~) koyuyoru

Bir örnek yapacak olursak bir resmimiz var bunu sola hizalayacağız ve sağdanda metinler akacak. Bu resim ve paragraflar arasına padding tanımlamak için genel kardeş seçicisi birebirdir.

img{
	float:left;
}

img ~ p{
	padding-left:110px;
}

html kodu

<img src="kedi.jpg" width="96" height="96" alt="kedi" />
<p>Kedi (Felis catus),...</p>
<p>2,5 ile 12 kilo ...</p>
<p>Kediler hoş görünüşlü, ..</p>

Bu seçiciyi ie7’nin seçicisini destekliyor.

CSS3 Yarıdımı İle Js’den Çalınan Roller

  • Akordiyon Uygulaması
  • Sekme Uygulaması
  • Slider Uygulamaları
  • Lightbox, modal Uygulamaları
  • Animasyon ve efektler
  • Tooltip
  • Menü Uygulamaları
  • Özel Form Elemanları
  • Diğer Uygulamalar

Akordiyon Uygulaması

Akordiyon uygulamaları web sayfalarında biraz yerden kazanmak birazda görsellik kazandırmak için tercih edilen yapılardır. Mevcutta ve daha önceleri javascript daha doğrusu jquery ile yapılan bu uygulamaları artık CSS yardımı ile yapabiliyoruz.

CSS ile yapılan akordiyon menülerde kardeş seçicileri ve :checked Sözde sınıfı/:target Sözde Seçicisi yardımı ile oluşturuluyor. Gizlenmiş input alanına tıklandığında kardeş seçicisi le ile ulaşılan içerik göster-gizle yapılıyor. Araya animasyon koyarak daha görsel sonuçlar elde edilebiliyor.

Bu işi benzer bir mantık ile :target seçicisi yardımı ile yapabiliyoruz.

Sekme Uygulaması

Yine yer sıkıntısı nedeni ile oluşturulmuş çözümlerden birisi de sekmeli yapılardır.

CSS ile oluşturulurken yine kardeş seçicileri ve :checked Sözde sınıfı/:target Sözde Seçicisi yardımı ile oluşturuluyor.

CSS3 sekmeli yapıları gizli radyo butonuun :checked Sözde sınıfı yardımı ile tıklama özelliği kazandırılmış alana tıklayınca belirli alanların gözterilmesi mantığı ile yapılmaktadır.

Slider

Şu aralar çok fazla tercih edilen slider uygulamalarını sadece CSS ile yapabilmek çok süper.

Çalışma mantığı, javascript ile yaptığımız mantık ile aynıdır. float ile yan yana sıralanmış içerik overflow:hidden ile sadece seçilen resmi gösteriyoruz. Her tıklamada margin-left değeri içerik kadar sola doğru çekecek bir değer verilerek yapılır.

Bir çok şekilde uygulaması olan silder’ın farklı çeşitlerini görmek için codrops sitesine uğramanızı öneriyorum. Makalede linkleri mevcut.

Site içinde kullanılan resimlerin daha büyüğünü görmek için kullanılan yapılardır. Sadece resimler değil içerik içinde geçerli. Bir nevi popup’ın yerini aldı lightbox.

Mantık olarak küçük bir resme tıklayınca büyük resmi göstereceğiz. :target sözde sınıfı yardımı ile ilgili büyük resmi yakalayıp göstererek yapılıyor.

Ayrıca animasyon ve transition yardımı ile görsel olarak güzel geçişler yapabiliyoruz.

Animasyon, Efektler vd.

Daha çok flash ile yapılan animasyon ve efektler, aynı zamanda javascript ile de bir çok animasyon ve efekt yapabiliyoruz.

CSS3 yardımı ile artık CSS ile de yapabiliyoruz.

Bu konuda CSS3 Animasyon ve CSS3 Transition özellikleri kullanılmaktadır.

Şu an için flashdaki efekt ve animasyonların hepsi yapılamasa da güzel bir çok örnek yapılabilmekte.

Animasyona alışık olmayan CSS kod yazarlarını zorlayacak uygulamalar. Ancak uğraşması zevkli.

  • [http://tympanus.net/codrops/2011/12/07/splash-and-coming-soon-page-effects-with-css3/][]
  • [http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/][]
  • [http://tympanus.net/codrops/2012/05/22/creating-an-animated-3d-bouncing-ball-with-css3/][]
  • [http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/][]
  • [http://tympanus.net/codrops/2012/05/21/animated-3d-bar-chart-with-css3/][]
  • [http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/][]
  • [http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/][]
  • [http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/][]
  • [http://tympanus.net/codrops/2011/12/12/experiments-with-background-clip-text/][]
  • [http://tympanus.net/codrops/2011/11/09/interactive-html5-typography/][]
  • [http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/][]
  • [http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/][]
  • [http://monkeyandcrow.com/blog/css3_splitview/][] (spliteview)

Tooltip

CSS2 ile de yapabildiğimiz tooltip uygulamaları CSS3 ile daha görsel ve efektli görünüm kazandırabiliyoruz.

:before ve :after Sözde elementleri ve CSS3 Animasyon/ CSS3 Transition yardımı ile bir çok güzel tooltip yapabiliyoruz.

  • [http://www.red-team-design.com/css3-tooltips][]
  • [http://tympanus.net/codrops/2012/02/01/how-to-create-animated-tooltips-with-css3/][]
  • [http://sixrevisions.com/css/css-only-tooltips/][]

Menü

Bir çok menü uygulaması uzun süredir javascript’ten bağımsız olarak sadece CSS ile yapılmakta.

CSS3’ün yeni özellikleri görsellik ve efektli ve resimsiz çözümler üretmemizi sağlıyor.

@font-face özelliği ve CSS3 renk geçişi yardımı ile resimsiz güzel menüler elde edebiliyoruz.

  • [http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/][]
  • [http://webdesignerwall.com/tutorials/css3-dropdown-menu][]
  • [http://www.cssplay.co.uk/menus/cssplay-radial.html][]
  • [http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript][]
  • acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript
  • [http://www.htmldrive.net/items/show/437/CSS3-only-horizontal-drop-line-tab-menu][]
  • [http://cssdeck.com/item/511/soothing-css3-dropdown-animation][]
  • [http://tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/][]
  • http://www.webstuffshare.com/2010/04/nice-menu-css-animation-jquery-animate

Özel Form Elemanları

İşletim sisteminin standart form elemanlarından sıkılmış bir çok kullanıcı gibi tasarımcılarda özel form elemanları tasarlamaktadır. Arayüz geliştiricileri zorlayan bu konuda yardımımıza javascript yetişiyordu.

Artık CSS3 :checked Sözde sınıfı yardımı ile güzel radyo butonları ve işaret kutuları oluşturabiliyoruz.

  • [http://www.thecssninja.com/css/custom-inputs-using-css][]
  • [http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/][]
  • [http://proto.io/freebies/onoff/][]

Diğer Uygulamalar

Bunun dışında yine kardeş seçicileri, :checked, :target sözde seçileri, CSS3 Animasyon, CS3 Transtion özelliklerini kullanarak bir çok farklı uygulama yapılmaktadır. Benim gördüğüm

  • [http://cssdeck.com/item/269/css-news-ticker][] - haber barı
  • [http://cssdeck.com/item/513/colourful-css-loader][] - loading
  • [http://www.hongkiat.com/blog/css3-animation-advanced-marquee/][] (marquee)
  • http://www.webstuffshare.com/2012/04/how-to-create-animated-list-view-using-css3-only (liste görünümü)
  • [http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript][] (kronometre)
  • ryancollins.me/?p=1041

Kaynaklar

  • [http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/][]
  • [http://css-tricks.com/the-checkbox-hack/][]
  • [http://www.inserthtml.com/2012/04/css-click-states/][]
  • [http://designshack.net/articles/css/using-checkboxes-to-toggle-css-and-create-click-events/][]
  • http://calebogden.com/css-target/
  • http://www.bilisimdergi.com/3-Katman-Mimarisi-ve-JavaScript-14-5.html
  • cscie12.dce.harvard.edu/lecture_notes/2010/20100324/handout.html

alexindigo.github.com/lightbox/#gallery [http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/]: http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/ [http://www.paulrhayes.com/2011-03/css-modal/]: http://www.paulrhayes.com/2011-03/css-modal/ [http://tympanus.net/codrops/2011/12/07/splash-and-coming-soon-page-effects-with-css3/]: http://tympanus.net/codrops/2011/12/07/splash-and-coming-soon-page-effects-with-css3/ [http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/]: http://tympanus.net/codrops/2011/10/19/blur-menu-with-css3-transitions/ [http://tympanus.net/codrops/2012/05/22/creating-an-animated-3d-bouncing-ball-with-css3/]: http://tympanus.net/codrops/2012/05/22/creating-an-animated-3d-bouncing-ball-with-css3/ [http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/]: http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/ [http://tympanus.net/codrops/2012/05/21/animated-3d-bar-chart-with-css3/]: http://tympanus.net/codrops/2012/05/21/animated-3d-bar-chart-with-css3/ [http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/]: http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/ [http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/]: http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/ [http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/]: http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/ [http://tympanus.net/codrops/2011/12/12/experiments-with-background-clip-text/]: http://tympanus.net/codrops/2011/12/12/experiments-with-background-clip-text/ [http://tympanus.net/codrops/2011/11/09/interactive-html5-typography/]: http://tympanus.net/codrops/2011/11/09/interactive-html5-typography/ [http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/]: http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/ [http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/]: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ [http://monkeyandcrow.com/blog/css3_splitview/]: http://monkeyandcrow.com/blog/css3_splitview/ [http://www.red-team-design.com/css3-tooltips]: http://www.red-team-design.com/css3-tooltips [http://tympanus.net/codrops/2012/02/01/how-to-create-animated-tooltips-with-css3/]: http://tympanus.net/codrops/2012/02/01/how-to-create-animated-tooltips-with-css3/ [http://sixrevisions.com/css/css-only-tooltips/]: http://sixrevisions.com/css/css-only-tooltips/ [http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/]: http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/ [http://webdesignerwall.com/tutorials/css3-dropdown-menu]: http://webdesignerwall.com/tutorials/css3-dropdown-menu [http://www.cssplay.co.uk/menus/cssplay-radial.html]: http://www.cssplay.co.uk/menus/cssplay-radial.html [http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript]: http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript [http://www.htmldrive.net/items/show/437/CSS3-only-horizontal-drop-line-tab-menu]: http://www.htmldrive.net/items/show/437/CSS3-only-horizontal-drop-line-tab-menu [http://cssdeck.com/item/511/soothing-css3-dropdown-animation]: http://cssdeck.com/item/511/soothing-css3-dropdown-animation [http://tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/]: http://tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/ [http://www.thecssninja.com/css/custom-inputs-using-css]: http://www.thecssninja.com/css/custom-inputs-using-css [http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/]: http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/ [http://proto.io/freebies/onoff/]: http://proto.io/freebies/onoff/ [http://cssdeck.com/item/269/css-news-ticker]: http://cssdeck.com/item/269/css-news-ticker [http://cssdeck.com/item/513/colourful-css-loader]: http://cssdeck.com/item/513/colourful-css-loader [http://www.hongkiat.com/blog/css3-animation-advanced-marquee/]: http://www.hongkiat.com/blog/css3-animation-advanced-marquee/ [http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/]: http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/ [http://css-tricks.com/the-checkbox-hack/]: http://css-tricks.com/the-checkbox-hack/ [http://www.inserthtml.com/2012/04/css-click-states/]: http://www.inserthtml.com/2012/04/css-click-states/ [http://designshack.net/articles/css/using-checkboxes-to-toggle-css-and-create-click-events/]: http://designshack.net/articles/css/using-checkboxes-to-toggle-css-and-create-click-events/

tarihinde Fatih Hayrioğlu

Firebug kodlama hayatımızda önemli bir yere sahip, Google Developer Bar ile şu aralar çekişseler de Firebug’ın bendeki yeri ayrı.

Firebug 1.10 ile birlikte gelen yeni özellikler;

Çerez Sekmesi

En büyük yeniliklerden birisi Çerez yönetim sekmesinin eklenmesi. Belirli siteler için çerez kullanımını engelleyebilirsiniz, var olanı değiştirebilir veya yeni çerez ekleyebiliyoruz.

Tarayıcıyı Aç-Kapa Yok

Yeni Firebug güncellendikten sonra tarayıcıyı açıp-kapmaya gerek yok. Direk güncelleme sonrası yeni sürüme geçiş oluyor.

Not:1.9 önceki sürüm yüklü ise aç-kapa gerekiyor.

Yükleme Geciktirmiyor

Firebug Firafox’un başlangıcını yavaşlatmıyor artık. Firebug kullanıcının ilk isteği ile yükleniyor. Tarayıcı ilk açıldığında sadece Firebug ikonu ve menüsü yükleniyor.

Komut Editörü Renklendirilmiş

Komut satırı artık renklendirilmiş durumda. Renklendirilmiş komut satırı daha okunaklı ve güzel görünüyor.

Otomatik tamamlama geliştirilmiş

Firebug’ın Google Web Developer Tools’dan geri kaldığı özelliklerden birisi otomatik tamamlama özelliğinin yeteri kadar iyi olmaması idi. Yeni sürüm ile birlikte bu alanda geliştirmeler yapılmış.

Bu özellik CSS özellikleri, İzleme(Watch) panelinde değişkenleri yakalamada, break-point ile koşullarında, renk, yazı tipi isimi vs. otomatik tamamlama çalışıyor.

Stil geçmişini İzleyebiliriz

Yine Google Developer Tools’da olan güzel bir özellik Firebug’a eklenmiş. Bir eleman üzerine tanımlanmış CSS özelliklerinin sırası ile izlememizi sağlayan güzel bir özellik.

Computed sekmesinde aktif olan atama siyah, pasif olan atamalar ise gri olarak gösterilmiş.

:focus Sözde Sınıfını Desteği

Daha önce :hover, :active gibi sözde sınıfları destekleyen Firebug şimdi :focus desteğini sağlayarak güzel bir özellik daha eklemiş bünyesine.

bu sayede elemana odaklandığında bir CSS tanımı yapıldı ise bunu yakalamak artık daha kolay.

Media Query Özelliklerini Düzenleme İmkanı

Uyumlu(responsive) web ile çok büyük önem kazanan media sorguları, Firebug’ın yeni sürümünde de gözden kaçmamış. Medya sorgularını Firebug ile düzenleyebiliyoruz artık.

@font-face Tanımları

font-face ile tanımlanan harici fontlar font listesinde görünüyor artık.

CSS Özelliklerini Silme

Bir yeni özellik; Firebug CSS özelliklerine sağ tıklayıp silebilme imkanı veriyor

Diğer Yeni Özellikler

Yukarıda saydıklarımızın haricinde aşağıdaki yeni özelliklerde eklenmiş;

  • HTML sekmesinde gösterilen kodun formatını değiştirebiliyoruz.
  • Kod içindeki gösterilen renk tanımlarının formatını değiştirebiliyoruz
  • Menüdeki elemanların açıklamalarını tooltip ile gösterimi eklenmiş.
  • Konsolda help yazarak API comutlarının özet tanımlarına erişebiliyoruz.
  • Bunlardan başka 79 geliştirme daha yapılmış.

Sonuç

Google Geliştirme Aracı ile rekabete giren Firebug bu yeni sürüm ile bir çok yeni güzellik eklemiş. Google Geliştirme aracındaki kod ayrıştırma özelliğini de ekleseler süper olacaktı.

Kaynaklar

tarihinde Fatih Hayrioğlu

CSS3 yeniliklerinde yaralanıyoruz, tabi bazı sorunlar ortaya çıkıyor. Hatasız kod olmayacağı için, hata olur ama bir çözümüde vardır elbet diye düşünmemiz lazım.

Sorun tam olarak bir sayfanın ardalanının tamamına renk geçişi uygulamak istediğimizde belli bir yere kadar uygulayıp kalan kısmını tekrar ettirerek istemediğimiz bir durum oluşmasına neden oluyor.

Sorunun çözümünü aradığımda ilk sonuç http://stackoverflow.com/ sitesinde buldum biraz daha araştırınca benzer cevaplar gördüm ve sizlerle paylaşmak istedim.

background-image özelliğine eklenen renk geçişi kodu tekrar edecektir, biz bu tekrarı istemediğimiz için.

background-repeat: no-repeat;

ekledik. Ayrıca uygulana renk geçişinin sayfa zemininde sabitlenmesi için

background-attachment: fixed;

kodunu ekledik.

Diğer kod eklemeleri farklı tarayıcılar içindir.

Kaynaklar