‘ipucu’ etiketi için sonuçlar
Küçük bir ipucu: FireBug ile satır numarası bilgisi
Mart 11th, 2010 • 7 yorum CSS
Etiketler: DragonFly, firebug, Firefox, ipucu, Opera, satır-numarası
Bazen kullandığım programların alternatiflerini araştırıyorum. Amacım eğer daha güzel ve daha kullanışlı özellikleri varsa onlardan yararlanmak.
Opera 10.50 çıkınca bir inceleyeyim dedim. Gayet hoş, güzel, hızlı. Birde beni Firefox’a bağlayan en büyük etken olan FireBug’ın Opera’daki alternatifi DragonFly’ı inceleyeyim dedim.
DragonFly ilk çıktığından buyana bayağı bir yol kat etmiş açıkçası. Aslında FireBug’ı taklitten başka bir şey değil ama olsun oda bir marifet. Microsoft gibi bir firma bile beceremediğine göre büyük bir şey olsa gerek.
DragonFly gerçekten güzel. FireBug’a alternatif bir kaç görsel güzellikleri var.
Gelelim küçük ipucumu yazmama neden olan kısıma. FireBug’da beni cezbeden şey, ayrıntılarında bir çok avantajın gizli olması. Bunlardan biri seçtiğimiz elemanı etkilyen tanımların hangi doküman içinde yer aldığını göstermesi ve hangi satırda olduğunu belirtmesi. Belki küçük bir ayrıntı ama benim çok işime yarıyor. Hemde çok.
4-5 ay önce ben css kodlarımı her tanım bir satıra gelecek şekilde yazıyordum. Sebebi çok açık kodların okunabilirliği artıyordu böylece. Sonra fark ettim ki ben kodları okumuyorum artık FireBug ile yakalıyorum ve satır numarasından ilgili dokümanı açıp müdahele ediyorum. Bununda etkisi ile her satırda bir tanım yerine her satırda bir seçici şeklinde css dosyalarımı yazmaya başladım ve bu bana çok büyük bir yer kazandırdı.
Evet bazı küçük özellikleri fark etmesekde bize çok büyük faydalar sağlayabiliyor.
Sağol FireBug. Sen olmasan bu iş gerçekten zor olurdu.
İnternet Explorer’da sağdaki sabit kaydırma çubuğunu kaldırmak
Şubat 11th, 2010 • 8 yorum CSS
Etiketler: ie, ie6, ie7, ipucu, kaydırma-çubuğu, overflow
Pek nadirde olsa böyle bir istek ile karşılaşıyorum. Bu ikinci oldu. İlk başta bunun bir çözümü yoktur diye düşündüm(Bunu düşünmemin nedeni daha önce böyle bir istek ile karşılaştığımda çözümünü bulamadım diye aklımda kalması). Ancak sonra bazı sitelerde böyle bir şey yapıldığını görünce, araştırmaya karar verdim ve çözümü buldum.
Genelde %100 flash sayfalarda veya kendi içinde kaydırma çubuğu çıkan sayfalarda bu tip bir istek geliyor.
Firefox, İnternet Explorer 8, Safari, Google Chrome gibi yeni nesil tarayıcılar eğer içerik uzun değilse kaydırma çubuğunu göstermiyor. Ancak ie6 ve ie7 de durum böyle değil. İçerik olsun yada olması sağda yatay kaydırma çubuğu daima görünüyor. Bu durumu eşitlemek için çok basit bir kod yazmamız yeteli oluyor.
html {overflow:auto;}
Kaynaklar
CSS İpucu 20: Firefox’da Kaydırma Çubuğu Çıkarma
Nisan 16th, 2009 • 16 yorum CSS
Etiketler: Firefox, ipucu, kaydırma-çubuğu, mozilla, overflow
Firefox İnternet Explorer’un tersine eğer sayfa yüksekliği kaydırma çubuğu çıkarmayacak kadar yüksekliğe sahip değilse kaydırma çubuğu çıkarmıyor. Bu özellikle çerçeveli sayfalarda sorun çıkarabilir. Bunun için bir çözüm.
html{
overflow:-moz-scrollbars-vertical;
}
Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları
Şubat 9th, 2009 • 14 yorum CSS
Etiketler: float, ipucu, kapsayamama-sorunu, sorun
1- Firefox 3′de form elemenalarının Tıklanamaması Sorunu
Daha önce bir kaç kez bahsettiğim ve web kod yazarlarının birçok zaman karşılaştığı ‘Float uygulanmış elementlerin kapsayamama sorunu’ bugün xpur(Gökhan)’un bir sorusu üzerine bu yazıyı yazma gereği duydum.
Kapsayamama sorunu yaşadığımız katman içinde eğer selectbox var ise Firefox 3′de bu selectbox tıklanabilir olmuyor. Açılmıyor yani
Kodumuz aşağıdaki gibi
.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 */
sorunu çözümü ise .kapsayamamaSorunu ile :after arasındaki boşluğu kapatmak .kapsayamamaSorunu:after
.kapsayamamaSorunu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Küçük bir nokta olsa da zamanı gelince insanın çok zamanını alıyor.
2- Sorunun Kısayolu
Bu konuda hakkında bir başka ipucuda float’uygulanmış nesnelerde bu sorun ile çok fazla karşılaşıyoruz, ben eskiden her bir sorunlu eleman için bu kodu yazıyordum. Sonra bunu bir sınıfa atayıp gerekli yerlerde bu sınıfı kullanmanın daha avantajlı olacağını düşündüm.
.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 */
<div id="icerik" class="kapsayamamaSorunu">
<ul>
<li>
<select>
<option value="-1">Seçiniz</option>
<option value="1">Deneme1</option>
<option value="2">Deneme2</option>
</select>
</li>
</ul>
</div>
<div class="resimAlani kapsayamamaSorunu">
<img src="images/deneme.jpg" width="150" height="80" />
</div>
#icerik ve .resimAlani bu sorun ile karşılaştığımızı düşünelim. Tek tek bu kodu yazmaktansa .kapsayamamaSorunu isimli bir sınıf tanımlayıp sorunumuz ile karşılaştığımız her yerde bu sınıfı tanımlarız. Tek tanımla ile işimizi hallettik.
Tüm tarayıcılar için CSS Düzeltmeleri(Hack)
Aralık 3rd, 2008 • 40 yorum CSS, XHTML
Etiketler: CSS, css düzeltmeleri, düzeltme, hack, ipucu, kod-gizlemek
CSS ile web sayfası kodlarken bizi en çok zorlayan konulardan biri daha önceki yazılarımda bahsettiğim gibi farklı tarayıcı sürümlerine göre kod yazmaktır. CSS ile kod yazarken bazı durumlarda kodumuz bir tarayıcı grubunda düzgün görünürken başka bir tarayıcı grubunda farklı görüntülenir, tabi biz yaptığımız sitelerin kullanıcılar tarafından tarayıcısı ne olursa olsun aynı görünmesini isteriz. Bu gibi durumlarda kullandığımız yöntem aslında çok basit bir tekniktir. Hangi tarayıcıda farklı görünüyorsa onun için farklı kod yazarız ve bunu diğer tarayıcıların görmeyeceği kod bloğu içinde yazarız.
CSS Derslerindeki CSS Sorunları ve Çözüm Önerileri kısmındaki birçok yöntemin ana mantığıda budur.
Farklı tarayıcılar için düzenleme(hack) yazarken genel anlamda iki farklı yöntem kullanırız. Farklı css dosyaları hazırlayıp bunları eklerken şartlı yorumlar yardımı ile farklı tarayıcılar için farklı css kodlarını gösteririz, ikinci yöntem ise kod içerisinde o tarayıcının gördüğü kod bloğu içinde ona göre kod yazarız. Burada birinci yöntemi(IE’de Hata Ayıklamak için şartlı Yorumlar Kullanmak) daha önce anlatmıştık. Bu yazımızda kod içindeki css düzeltmelerinden bahsedeceğiz.
CSS kodu içinde farklı tarayıcılar için farklı kod yazmanın en kolay yolu, tarayıcılara özel seçiciler içine kod yazmaktır.
Javascript ipucu: Şartlı ifadelerin(if..else) kısa yazılımı
Nisan 9th, 2008 • 5 yorum Ajax, Javascript
Etiketler: if else, ipucu, Javascript, şarlı-ifadeler
Bir çok kere lazım oldu ve aramak zorunda kaldım ve her aramam da 10-15 dakika kaybettim. En sonun da buraya yazmaya karar verdim. Malum kendi sitemde aramak daha kolay ve hatırda kalıcı oluyor. Birde sizlere de yardımı dokunur bir ihtimal diye yazıyorum.
Javascript’te if..else şartlı ifadesini herkes biliyor.
if(kosul)
{
//kosulun gerçekleşmesi halinde olacak olay
}
else{
//kosulun gerçekleşmemesi halinde olacak olay
}
Bu kodu bir kere yazmak sorun değil ama bir çok programcı bilir ki bu bir kodlama da sadece bir kere yazılmaz ve çok fazla yazıncada bıkkınlık verir. Bizi düşünene javascript geliştiricileri bunu da düşünerek bize kısa bir yazım şekli sunmuşlar.
- koşul ? koşulun gerçekleşme durumu : koşulun gerçekleşmeme durumu;
Bir örnek yapalım.
durum = (yas >= 18) ? "yetişkin" : "küçük";
yas değeri 18′den büyük ve eşit olması durumunda durum değişikeninin değeri “yetişkin” değilse “küçük” olacaktır.
