Benzer bir uygulamayı yapmak için kodları yazdım. Daha önce bahsettiğim rgba tanımı ile bu iş çok basit olacaktı.

#popup{
  position:absolute;
  top:90px;
  left:40%;
  border:10px solid rgba(0,0,0, 0.5);
  text-align:center;
  font-size:24px;
  background-color:#FFFFFF;
  width:350px;
  padding:50px 0;
  border-radius:10px;
  z-index:100;
}

Ancak aşağıdaki gibi bir görüntü elde ettim.

Çözümü biraz araştırdım ancak pek bir şey bulamadım derken css-tricks’in çözümü bana ilaç gibi geldi. Çözüm background-clip özelliği tanımı ile sağlanıyor.

#popup{
  position:absolute;
  top:90px;
  left:40%;
  border:10px solid rgba(0,0,0, 0.5);
  text-align:center;
  font-size:24px;
  background-color:#FFFFFF;
  width:350px;
  padding:50px 0;
  border-radius:10px;
  z-index:100;
  -moz-background-clip: padding;     /* Firefox 3.6 */
  -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
  background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

Kaynak

• http://css-tricks.com/transparent-borders-with-background-clip/

Farenin işlevini yerine getirip getirmeyeceğini belirlemek için kullanılır. Örneğin bir menüde mevcut sayfayı gösteren menü elemanının tıklanma olayını kaldırabiliriz.

pointer-event özelliği belirlenen elemanın farenin işlevine vereceği tepkiyi belirler. Bu tepki aşağıdaki çerçevededir.

• Kullanıcı arayüzü olayları (örneğin fare tıklaması)
• Dinamik Sahte Sınıflar (örneğin :hover, :focus)
• Hiperlinkler

pointer event özelliği aslında SVG içerikleri için uygulanan bir özelliktir.

Aldığı değerler bakalım;

auto: pointer-events özelliğine herhangi bir tanım yapılmadı ise fare tıklamasına müdahale etmez. SVG içeriklerde, bu değer visiblePainted ile aynı etkiyi yapar.

none: Element fare olaylarını uygulamayacaktır.

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke ve all: Sadece SVG içindir.

Bir örnek ile durumu daha iyi görelim.

• <ul class="menu">
• <li><a href="index.html">Ana Sayfa</a></li>
• <li><a href="hakkimizda.html" class=”on”>Hakkımızda</a></li>
• <li><a href="urunler.html">Ürünler</a></li>
• </ul>

Hakkımızda sayfasında olduğumuzda kullanıcının hakkımızda linkine tıklaması mantıklı değildir, hakkımızda bağlantısının fare tıklama olayını kaldırmak için

• .menu a.on {
•       pointer-events: none;
•       cursor: default;
• }

Tanımı istediğimiz sonucu verecektir.

CSS3 ile dinamik bileşenlerin CSS ile halledilmesi işine alıştık. Bu tip CSS ile halledebilmemiz güzel.

Kaynaklar

• https://developer.mozilla.org/en/CSS/pointer-events
• http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
• http://robertnyman.com/css3/pointer-events/pointer-events.html
• http://css-tricks.com/6379-pointer-events-current-nav/
• http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/
• http://www.webkit.org/specs/PointerEventsProperty.html

CSS3 word-wrap özelliği diğer CSS3 özelliklerinden farklı olarak tüm tarayıcılar(IE dahil) tarafından desteklenmektedir.

word-wrap özelliği belirtilen alandaki metnin kapsayıcı eleman sınırlarını zorlayan uzunlukta arada boşluk olmadan uzadığında kelimeyi satır başına atmak için kullanılır.

Bir örnek verecek olursak 150px genişliğindeki bir alan içinde bir metnimiz olsun.

<div id="link">
Loremipsumdolorsitametconsecteturadipiscingelit. Nam semper venenatis lobortis. Donec odio nisl, vehicula vitae molestie ac, euismod ac nibh.
</div>

CSS kodu

#link{
  width:150px;
  border:1px solid #999;
}

word-wrap ile bu uzun kelimeyi aşağı atarak sayfadaki patlaklığı düzeltebiliriz.

Önceki yazımda bu işi white-space ile halletmiştim, ama mantıklı olan word-wrap ile çözmek.

text-wrap

text-wrap özelliği word-wrap’e benzer bir özelliktir. word-wrap’in kelimeye yaptığı etkiyi text-wrap metinlere yapar.

text-wrap 4 adet değer alır.

• normal: Satır sadece belirlenen yerlerden sonra satır başı yapar.
• none: Satır herhangi bir yerden satırbaşı yapmaz. Metin kapsayıcı üzerinden aşar.
• unrestricted: Satır herhangi iki karakter arasından satırbaşı yapılabilir.
• suppress: Satır içinde eğer satırbaşı yapacak bir nokta yoksa elemanı satırbaşı yaptırır

Bu özelliği henüz hiç bir tarayıcı desteklemiyor.

text-stroke

CSS3 ile birlikte text-outline olarak standartlara giren bu özellik daha sonra standartlardan çıkarıldı, ancak webkit tabanlı tarayıcıların -webkit-text-stroke olarak desteklemektedir.

CSS3 ile birlikte metinlerin etrafına dış çizgisi çizmemize olanak sağlıyor. Şu an sadece webkit tabanlı tarayıcıların(Safari, Chrome) desteği mevcut.

Tanım yaparken ilk olarak yazı tipinin rengini yaparız, sonrada dış hat çizgisini tanımlarız.

font:bold 24px Arial, Helvetica, sans-serif;
color: #c00;
-webkit-text-stroke: 1px #000;

<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/fatihhayri/3dsPG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

text-stroke tanımının ilk değeri dış çizgisinin kalınlığını ikinci tanım rengini belirler.

Dış Çizgili ve Saydam zeminli Yazı Tipleri Oluşturmak

Saydam zeminli yazı tipleri tanımlamak için text-fill-color  özelliği kullanılır.

ont:bold 24px Arial, Helvetica, sans-serif;
color: #c00;
-webkit-text-stroke: 1px #000;
-webkit-text-fill-color: transparent;

text-align (yeni değerler)

text-align özelliği CSS3’den öncede vardı ancak CSS3 ile bu özelliğe iki tane daha yeni değer atandı. Burada bunları inceleyeceğiz. start ve end değerleri. Türkçe ve İngilizce metinler solda-sağa doğru akar., ancak bazı dillerde akış sağdan-sola doğrudur, örneğin Arapça. Böyle sağdan-sola doğru akan dillerde için bu iki değer işe yarıyor.

• start: Eğer akış soldan sağa ise left etkisi yapacaktır. Akış sağdan-sola ise right etkisi yapacaktır.
• end: Eğer akış soldan sağa ise right etkisi yapacaktır. Akış sağdan-sola ise left etkisi yapacaktır.

text-align-last

CSS3 ile birlikte gelen bu özellik son satırın veya justify tanımlanmış elemanların satırlarının hizalanmasını sağlar. Bu özellik text-align ile aynı etkiyi yapar.

justify uygulanmış bir metnin son satırının sağa yaslı olmasını istiyorsak

p {
text-align: justify;
-ms-text-align-last: right;
}

text-overflow

Blok kapsayıcı elemanı içindeki satır içi elemanın içeriğini overflow uygulamak için kullanılır. Blok kapsayıcı elemana overflow:visible tanımı yapılmamış olmalıdır.

resim kaynağı: https://developer.mozilla.org/en/CSS/text-overflow

Başlangış değeri clip’dir. clip değeri alan satır içi eleman kapsayıcı eleman sınırlarından kırpılacaktır. Diğer aldığı değer ellipsis’dir. ellipsis değeri alan eleman clip gibi davranacaktır ancak farklı olarak sonuna üç nokta(…) koyacaktır.

CSS3 ile birlikte üç nokta yerine kendi istediğimiz özel karkateri cümle satır sonuna ekleyebiliyoruz.

p {
	text-overflow: 'herhangibirsey';
}

text-rendering

text-rendering özelliği okunabilirliği ayarlamamızı sağlana bir özelliktir. Bu özellik sayesinden tarayıcının metinlerimizi nasıl tarayacağını belirleyebiliyoruz. Tarayıcılar metinleri hız, okunabilirlik ve geometrik hassasiyet bakımından farklı şekilde yorumlarlar; text-rendering özelliği bu farklılıkları bizim kontrolümüze sunana bir özelliktir.

• auto değeri metin tarama işini tarayıcıya bıraktığımız anlamına geliyor.
• optimizeSpeed  değeri hızlı yüklemeyi okunabilirlik ve geometrik hassasiyetin önünde tutar. Karkater aralığı ve bitişik farf özelliklerinin pasifize eder.
• optimizeLegibility  değeri okunabilirliği hız ve geometrik hassasiyetin önünde tutar. Karakter aralığı ve bitişik harf özelliklerinin aktiftir.
• geometricPrecision değeri geometrik hassasiyeti hız ve okunabilirliğin önünde tutar. Geometrik hassasiyet ile yazı tipi oranlı olarak yorumlanmasını sağlar ve buda yazı tiplerinin daha güzel görünmesini sağlar.

resim kaynağı: https://developer.mozilla.org/en/CSS/text-rendering

Tanımlarda dikkatimiz çeken karakter aralığı olarak Y ve o arasındaki mesafe ve ffl görünümündeki farklar kendini gösteriyor.

Chrome auto değerini optimizeSpeed olarak yorumluyor, geometricPrecision  değerini tam olarak 13. sürümden itibaren yorumluyor.

Firefox auto değerini yazı boyutu 20px ve üzerinde optimizeLegibility gibi, diğerlerini ise optimizeSpeed gibi yorumluyor. geometricPrecision  ise optimizeLegibility gibi yorumluyor.

Safari auto değerini optimizeSpeed gibi yorumluyor.

hanging-punctuation

CSS3 metinleri yönetmek açısından bizim elimizi kuvvetlendirdiği kesin. hanging-punctuation özelliği bize ayrıntı bir özellik kazandırıyor. hanging-punctuation özelliği metin bloğunun dışına çıkarmamızı sağlıyor. Liste ikonları ve çift tırnakları metin bloğu dışına çıkararak daha güzel sonuçlar almamızı sağlıyor.

Yukarıdaki resimde görüldüğü gibi ilk resimde hanging-punctuation uygulanmamış halini görürken ikinci resimde uygulanmış halini görüyoruz. Çift tırnak ve keme işaretleri metin bloğu dışına çıkarak daha blok bir metini ortaya koyuyor.

Bu özelliği henüz herhangi bir tarayıcı desteklememektedir.

Sonuç

CSS3 birçok yönden elimiz güçlendirmektedir. CSS3 metinler üzerinde düzenleme yapmamıza olanak sağlıyor. Henüz tam olarak tamamlanmaya birçok yönü var CSS3 metin özellikleri zamanla daha iyi oturacaktır.

Önceden tarayıcılar ve işletim sistemlerinin inisiyatifinde olan özellikleri CSS3 ile birlikte kod yazarlarının eline vermeye çalışıyor.

Kalın sağlıcakla.

Kaynaklar

• http://www.w3.org/TR/css3-text/
• http://www.impressivewebs.com/word-wrap-css3/
• http://www.opera.com/docs/specs/presto27/css/text/
• http://caniuse.com/wordwrap (wordp-wrap destek listesi)
• https://developer.mozilla.org/En/CSS/Word-wrap
• http://www.w3.org/TR/css3-text/
• http://www.cardeo.ca/2010/adding-an-outline-to-your-text-using-the-css3-text-stroke-property (text-stroke)
• http://css-tricks.com/7405-adding-stroke-to-web-text/ (text-stroke)
• http://www.webkit.org/blog/85/introducing-text-stroke/
• http://code.stephenmorley.org/html-and-css/white-space-handling/
• http://www.impressivewebs.com/css-white-space/
• http://www.quirksmode.org/css/stroke.html
• http://www.impressivewebs.com/word-wrap-css3/
• http://www.fatihhayrioglu.com/satir-donusuword-wrap-firefox-sorunu-nasil-cozulur/#idc-cover
• http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
• https://developer.mozilla.org/en/CSS/text-align
• https://developer.mozilla.org/en/CSS/text-overflow
• http://www.456bereastreet.com/archive/201105/clipping_text_with_css3_text-overflow/
• http://www.cssplay.co.uk/menu/text-overflow.html (örnek)
• http://www.css3.info/preview/text-overflow/
• http://deepubalan.com/blog/2010/11/27/text-overflow-css3-property-explained-pure-css-solution-to-get-ellipsis/
• http://caniuse.com/text-overflow (destek listesi)
• https://developer.mozilla.org/en/CSS/text-rendering
• http://trentwalton.com/2010/06/29/css-text-rendering/
• http://htmlcss.wikia.com/wiki/Text-rendering
• http://coding.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
• http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-2
• http://www.webreference.com/programming/corecss/2/4.html

Burada sizlere bu özellikleri anlatmaya çalışacağım.

@font-face

Bu konuyda daha önce derinlemesine değinmiştim. @font-face kullanımı bağlantısından detaylı bilgi alabilirsiniz. Bu özelliği diğerlerine göre avantajı mevcut tüm tarayıcılar tarafından desteklenmesidir.

font-size-adjust

font-size-adjusting özelliği yazı tipinin x-yüksekliği değerini orantılı olarak ayarlamamızı sağlar. x-yüksekliği değeri; aşağıdaki görselde de görüldüğü gibi küçük x harfinin yüksekliğini gösterir.

Bu özellik farklı platformlar için kod yazarken çok önem kazanacaktır. Tasarımınız eğer belli sınırları var ise ve farklı işletim sistemlerinde aynı görüntüyü elde etmek istiyorsanız yükseklik için aynı oranı yakalamamıza yaracak güzel bir özellik.

Bir örnek verecek olursak; Verdana, Arial ve Trebuchet MS uyguladığımız 3 aynı metinin sonucu aşağıdaki gibi olacaktır.

Arial uyguladığımız 2. kolon ve Trebuchet Ms uyguladığımız 3. kolon aynı yüksekliğe sahipken ilk kolondaki verdana uyguladığımız metin yüksekliği daha yüksektir. Aynı yüksekiği yakalamak için

  .kolon1{
    font:12px/18px Verdana, Geneva, sans-serif;
    font-size-adjust:0.47;
  }

aynı yüksekliği yakalamamızı sağlayacaktır.

Bu özelliği daha iyi anlamak için http://brunildo.org sitesindeki örnek çok güzel.

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

font-stretch

font-stretch özelliği CSS2 ile birlikte gelip CSS2.1 ile birlikte kalkan özelliklerden biridir. CSS3 ile birlikte tekrar standartlara girmeye çalışıyor. Henüz hiç bir tarayıcı desteklemiyor.

font-stretch özelliği metinlerin geniş veya dar olmasını ayarlar.

Aldığı değerler;

normal
Yazı tipinin normal boyutlara getirir

semi-condensed, condensed, extra-condensed, ultra-condensed
Metni belirlene ölçülerde daraltır. Yarı, ekstra, normal ve ultra

semi-expanded, expanded, extra-expanded, ultra-expanded
Metni belirlene ölçülerde genişletir. Yarı, ekstra, normal ve ultra

wider, narrower CSS3’de bu değerler önerilmiyor
Göreceli değerlerdir. Kapsayıcı elemana göre göreceli olarak değer alır. wider değeri alan eleman kapsayıcısından daha geniş olurken, narrower değeri alan eleman kapsayıcısından daha dar olur.

font-effect

Metinlere oymacılık efektlerini vermek için kullanabileceğimiz bir özellik. CSS3 standartların eklenen bu özellik sayesinde biz kabartma, oyma ve dış hat çizgisi uygulayabiliriz. Kullanma için pek mantıklı gelmedi bana ama zaman vermek gerekiyor biraz.

font-smooth

Yazı tipi uygulamalarında yumuşatma işlemi çok önemlidir. Ancak bu sistemi işletim sistemleri ele aldığı için biz kod yazarları için işin bu tarafı için ancak bir iki çakma yöntem uygulamak kalıyordu. Bu özellik şimdilik pek etkili olmasada ilerisi için bir ümit benim için. Her bilgisayar Mac olsa yada PC’ler daha iyi yazı tipi tarasa font-face’in en büyük eksikliği ortadan kalkacaktır.

Gelecekle ümitle bakmak için bu özelliği daha etkin olması lazım.

font-emphasize

Asya kökenli yazı tipleri için kullanılabilecek bir özellik. Zamanla daha detaylı inceleriz. Lazım oldukça incelemek gereken bir özellik.

Sonuç

Tipografi çok detaylı bir mecra zamanla daha güzel sonuçlar alacağımızı düşünsemde şimdilik çok başarılı olduğunu söyleyemem. CSS3 ile Yazı tipi özellikleri arasında en önemlisi font-face özelliği bence, hala belli sorunları olsada tüm tarayıcıların destekliyor olması çok büyük bir katkıdır.

İleride her şey daha güzel olacak.

Kalın sağlıcakla

Kaynaklar

• http://www.w3.org/TR/css3-fonts/
• http://www.css3.info/more-type-control-with-css3-fonts/
• http://www.quackit.com/css/properties/css_font-size-adjust.cfm
• http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
• http://www.fonttester.com/help/css_property/font-size-adjust.html
• http://www.blackinci.com/css/15-css-font-ozellikleri.html#adjust
• http://webdesign.about.com/od/styleproperties/p/blspfontsizeadj.htm
• https://developer.mozilla.org/samples/cssref/font-size-adjust.html
• http://css-infos.net/property/-webkit-text-size-adjust
• http://www.emdpi.com/cssfontsizeadjust.html
• http://www.impressivewebs.com/little-known-css3-type/
• https://developer.mozilla.org/en/CSS/font-size-adjust
• http://www.w3.org/TR/WD-font/#font-size-adjust
• http://www.siku-siku.com/blog/2010/11/22/preserving-the-x-height-of-your-preferred-font-choice/
• http://babylon-design.com/mais-c-est-quoi-au-juste-font-size-adjust/ ()
• http://www.peterkroener.de/schoenes-neues-css-font-size-adjust/ (Almanca güzel)
• http://www.webspaceworks.com/resources/fonts-web-typography/43/ (oran değerleri)
• http://www.fonttester.com/help/css_property/font-size-adjust.html
• http://www.opera.com/docs/specs/presto27/css/fonts/ (font desteği)
• http://stuff4designers.com/2011/03/15/how-to-use-font-size-adjust/
• http://www.fatihhayrioglu.com/css-ve-tipografi/
• http://webforfreaks.com/cssandtype/index.php?chemin=content/2011-06-11/
• http://brunildo.org/test/xheight.pl (font-size-adjusting – örnek)
• http://www.xhtml-lab.com/css3-reference/font-size-adjust (güzel)
• http://www.w3schools.com/cssref/css3_pr_font-stretch.asp (font-stretch)
• https://developer.mozilla.org/en/CSS/font-stretch (font-stretch)
• http://msdn.microsoft.com/library/ff974090.aspx (font-stretch)
• http://meyerweb.com/eric/css/tests/css3/show.php?p=font-stretch (font-stretch)
• http://log.edds.me.uk/post/436921532/firefox-3-6s-css-font-stretch-support (font-stretch)
• http://clagnut.com/blog/2265/  (font-stretch)
• http://www.cssportal.com/css-properties/font-effect.htm
• http://www.handycss.com/wiki/font-effect/
• http://szafranek.net/works/articles/font-smoothing-explained/
• http://maxvoltar.com/archive/-Webkit-font-smoothing (webkit-macos)
• http://www.usabilitypost.com/2010/08/26/font-smoothing/ (webkit-macos)
• http://daneden.me/2010/12/css-font-smoothing/

Sorun şu ki ie7’de(ki ie6’yı öldürdük ama ie sorunlarından kurtulamadık) uyguladığım filtre: uygulanmıyor. http://www.colorzilla.com/gradient-editor/ sitesindeki aracı kullanarak renk geçişi kodlarımı oluşturuyorum.

div{
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
    background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
    padding:5px 10px;
}

Şöyle bir kodumuz olsun uygulamaya ie7’de baktığımızda background: #ffd65e; /* Old browsers */ satırının sonucunu görüyoruz, halbuki ie7 doğrusal renk geçişini destekliyor, ancak hasLayout sorunu nedeni ile bu özelliği uygulamıyor. Bir yükseklik veya genişlik tanımı yapınca düzeliyor, ancak bu benim işime yaramıyor. Gerçek çözüm ise hasLayout sorunlarının kahramanı zoom:1 tanımı

div{
    background: #f6e6b4; /* Old browsers */
    background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
    background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
    padding:5px 10px;
    zoom:1;
}

Kaynaklar

• http://stackoverflow.com/questions/3268834/css-gradient-height-for-ie
• http://stackoverflow.com/questions/213750/gradient-colors-in-internet-explorer

İlk olarak background-origin özelliğini inceleyerek başlayalım.

background-origin

background-image konumunu hesaplamada elementin kutusunun sınırlarını belirler. CSS3’den önce bu sabit bir değer olarak padding-box idi. Bu özellik bize farklı konumlandırma imkanı sağlar.

Yapısı: background-origin: <bg-box>
Aldığı Değerler: <bg-box> border-box | padding-box | content-box
Başlangıç değeri: padding-box
Uygulanabilen elementler: Tüm elementler
Kalıtsallık: Yok

Aldığı değerleri kısaca açıklarsak

• border-box: background-image konumu border alanından başlar
• padding-box: background-image konumu padding alanından başlar
• content-box: background-image konumu içerik alanından başlar

#kutu1 {
    -moz-background-origin: border;
    -webkit-background-origin: border;
    -webkit-background-origin: border-box;
    background-origin: border-box;
}
#kutu2 {
    -moz-background-origin: padding;
    -webkit-background-origin: padding;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
}
#kutu3 {
    -moz-background-origin: content;
    -webkit-background-origin: content;
    -webkit-background-origin: content-box;
    background-origin: content-box;
}

background-position:fixed tanımlı elementlere etki etmez.

Tarayıcı Destekleme Listesi
Firefox 3.6+ (-moz- öneki ile) 4+ (öneksiz)
Chrome 1+ (-webkit- öneki ile)
Safari 3.0+ (-webkit- öneki ile)
Opera 10.5
İnternet Explorer 9+

background-clip

background-clip ardalanın nerede gösterileceğini tanımlar. Daha önce padding dahil içerik alanı sabit olarak geliyordu, artık border alanıda dahil edilebiliyor veya padding alanı kapsamdan çıkarılabiliyor

Yapısı: background-clip: <bg-box>
Aldığı Değerler: <bg-box> border-box | padding-box | content-box
Başlangıç değeri: border-box
Uygulanabilen elementler: Tüm elementler
Kalıtsallık: Yok

Aldığı değerleri kısaca açıklarsak

• border-box: Ardalan içerik alanı + padding alanı + border alanını kapsar.
• padding-box: Ardalan içerik alanı + padding alanını kapsar
• content-box: Ardalan sadece içerik alanını kapsar.

border-box tanımı eğer background-origin:border-box ise uygulanır.

#kutu1{
 -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 background-origin: border-box;
 -moz-background-clip:border;
 -webkit-background-clip:border;
 -webkit-background-clip:border-box;
 background-clip:border-box;
}
#kutu2{
 -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 -moz-background-clip:padding;
 -webkit-background-clip:padding;
 -webkit-background-clip:padding-box;
 background-clip:padding-box;
}
#kutu3{
      -moz-background-origin: border;
 -webkit-background-origin: border;
 -webkit-background-origin: border-box;
 -moz-background-clip:content;
 -webkit-background-clip:content;
 -webkit-background-clip:content-box;
 background-clip:content-box;
}

background-origin:border-box olarak tanımladığımızda background-clip özelliğini daha iyi anlarız. Her üç kutudaki farkları gördüğünüz gibi. Resim sırası ile border, padding ve içerik alanından kırpılmıştır.

Tarayıcı Destekleme Listesi
Firefox 3.6+ (-moz- öneki ile) 4+ (öneksiz)
Chrome 1+ (-webkit- öneki ile)
Safari 3.0+ (-webkit- öneki ile)
Opera 10.5
İnternet Explorer 9+

backgroun-origin özelliği background-image konumunun kapsama alanını belirlerken, background-clip ise background alanını kırpmak için kullanılır. background-origin sadece ardalan resmini etkilerken background-clip ardalan resmi ve ardalan renginide etkiler.

Bu özellikleri destekleyen farklı tarayıcılar için önek ile çözüm üretilir. Diğer önek uygulamalarında farklı olarak bu özelliklerin değerlerinde de tarayıcı sürümleri arasında farklılıklar vardır. Firefox ve Webkit’in eski sürümlerinde değer olarak border, content ve padding değerlerini desteklerken son çıkan sürümler standartlaşan content-box, border-box ve padding-box değerlerini desteklemektedirler.

background-clip: text Değeri

Webkit tabanlı tarayıcılarda diğerlerinden farklı olarak text değeride vardır. Henüz standartlarda bulunmayan bu değeri sadece webkit kullanan Chrome ve Safari desteklemektedir. Bu değer atandığında metinin ardalanına resim uygulanıyor geri kalan kısımlara ise saydam ardalan olarak kalıyor.

#kutu1 {
   -moz-background-origin: border;
   -webkit-background-origin: border;
   -webkit-background-origin: border-box;
   background-origin: border-box;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font:bold 72px Arial, Helvetica, sans-serif;
}

-webkit-text-fill-color:transparent ile metnin ardalanını saydamlaştırıyoruz ve elemanın ardalanındaki resmi gösteriyoruz. Çok güzel görsel çalışmaları bu şekilde yapabiliriz, ancak henüz sadece Chrome ve Safari desteklediği için pek kullanışlı değil.

Kaynaklar

• http://www.css3.info/preview/background-origin-and-background-clip/
• http://www.w3.org/TR/css3-background/
• http://www.quirksmode.org/css/background.html
• http://www.w3schools.com/cssref/css3_pr_background-clip.asp
• http://www.standardista.com/css3/css3-background-properties/
• http://css-tricks.com/7423-transparent-borders-with-background-clip/
• https://developer.mozilla.org/en/CSS/background-clip
• https://developer.mozilla.org/en/CSS/background-origin
• http://dev.opera.com/articles/view/css3-border-background-boxshadow/
• http://www.sitepoint.com/new-properties-and-values-in-backgrounds-with-css3/
• http://www.css3.info/webkit-introduces-background-cliptext/  (text)
• http://www.cssreset.com/2010/css-tutorials/fun-with-webkit-background-clip-and-font-face/ (text)
• http://www.webkit.org/blog/164/background-clip-text/ (text)
• http://www.impressivewebs.com/background-clip-css3/ (güzel)
• http://css-class.com/test/css/backgrounds/background-origin1.htm
• http://css-infos.net/property/background-origin
• https://www.youtube.com/watch?v=7xVS2FX2Mao&feature=related (video)

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .arama { background-color: #FF0000; }
    #solAlan {color: #0000FF;}
}

Şeklinde bir kod işimi gördü, ancak projeyi yayına atarken sıkıştırıp gönderiyoruz ve sıkıştırılınca

@media screen and(-webkit-min-device-pixel-ratio:0)

Satırındaki and ve ( arasındaki boşluğu sıkıştırma esnasında yok ediyor ve buda bu düzeltmenin uygulanmamasına neden oluyor. Çözüm için araya çakma bir yöntem(/*!*/) ile boşluk bırakmalıyız.

@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) { ... }

Şeklinde çözüm üretebiliyoruz.

Belki küçük bir ipucu ama lazım olur günün birinde

Kaynaklar

• http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/
• http://stackoverflow.com/questions/4104004/whats-the-semantic-of-media-screen-and-webkit-min-device-pixel-ratio0
• http://yuilibrary.com/projects/yuicompressor/ticket/2528087

Sayfa yerleşimini yaparken genelde float/clear veya position özelliklerini kullanarak yapıyorduz. Tabloya göre büyük avantajlar sağlayan bu yöntemlerden sonra web sayfası kodlamak daha kolay ve zevkli bir hal aldı. Detay için Tablo mu? Div mi? Karmaşasına Son Noktayı HTML5 koydu yazısını inceleyin.

Tabi CSS ile sayfa yerleşimi kodlamanın birçok avantajı var. Bunun yanında bazı karışık sayfa yerleşimlerinde ise bizi zorladığı bir gerçek. Özellikle esnek yapılı sayfa düzenleri ve dikey eksendeki yerleşimlerdeki sorunlarını gören W3C bize bu konuda yardımcı olacak yöntemleri üretmeye başladı. Bunlardan bir tanesi Esnek Kutu Yerleşimi Modülüdür(EKYM).

Esnek Kutu Yerleşimi Modülü kapsayıcı bir eleman içindeki alt elemanların yerleşimini sağlamaktadır. Daha önce dikeyde yaşadığımız birçok sorunu(dikeyde ortalama ve aksak kolon sorunları gibi) gidermemizi sağlıyor. Esnek Kutu Yerleşimi Modülünü bu makalemizde inceleyeceğiz.

Kapsayıcı elemana tanımlanan display:box özelliği yardımı ile alt elemanlara tanımlanan box(box-orient, box-direction, box-pack, box-align, box-lines, box-ordinal-group, box-flex ve box-flex-group) özellikleri ile sayfa yerleşimimizi çok kolay şekilde yapmamıza olanak sağlamaktadır.

CSS3 EKYM olarak kısaltacağımız bu özellik bize olanaklarını display:box tanımı içerisinde gelen yeni tanımlar ile getirmektedir. Bu yeni 8 tanım aşağıdaki gibidir;

• box-orient
• box-direction
• box-pack
• box-align
• box-lines
• box-ordinal-group
• box-flex
• box-flex-group

EKYM ilk olarak 2009 yılında standardı oluşturuldu, ancak daha sonra yeniden ele alındı ve şu an sonlandırılmak üzeredir. Biz 2009 yılındaki standartlaşan özellikleri tanımlayacağız, çünkü tarayıcılar 2009 yılındaki standartları desteklemektedir ve yeni standartlaşan özelliğinde mantık olarak çok büyük farklılığı yok.

display:box

İlk olarak kapsayıcı esnek kutuları çevreleyen eleman display:box tanımı yaparak başlıyoruz. Farklı tarayıcılar önek ile birlikte desteklemektedir;

#esnekKutu{
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}

Tanımı ile kapsayıcı elemanı tanımlıyoruz. Bu tanım ile kapsayıcı eleman içersindeki alt elemanların artık esnek yapılı olacağını ve EKYM özellikleri alabileceğini belirliyoruz.

Çok basit bir şekilde kutularımızı yanyana dizebiliriz mesela

#esnekKutuKapsul{
 display: box;
 display:-webkit-box;
 display:-moz-box;
 display:-ms-box;
 width:600px;
 border:1px solid #03C;
}

Kapsayıcı tanımlanan display:box tanımı ile içindeki elemanlar birer inline-block eleman gibi davranır ve yanyana sıralanır.

box-orient

box-orient özelliği ile esnek kapsayıcı eleman içindeki kutuların hangi eksende sıralanacağını belirleriz. Yukarıdaki örnekte gördüğümüz gibi eğer bir tanım yapılmadı ise ve kapsayıcı eleman genişliği müsait ise kutular yatayda yanyana sıralanır.

Biz bu durumu değiştirmek için box-orient özelliğini kullanırız. 3 adet değer alır.

• horizontal: Kutular yatay eksende soldan sağa doğru sıralanır.
• vertical: Kutular dikey eksende yukarıdan aşağıya doğru sıralanır.
• inherit: Üst elemanın değerini alır.

Bunlardan başka iki değer daha mevcuttur. inline-axis yatayda ve block-axis dikeyde sıralamayı sağlar. Bu tanımlar horizontal ve vertical gibi davranırlar.

#esnekKutuKapsul{
 display: box;
 display:-webkit-box;
 display:-moz-box;
 box-orient:vertical;
 -moz-box-orient:vertical;
 -webkit-box-orient:vertical;
 width:200px;
 height:600px;
 border:1px solid #03C;
}

box-orient:vertical ile esnek kutularımızı dikeyde sıraladık.

box-direction

box-direction özelliği kapsayıcı eleman içindeki esnek kutuların sıralama yönünü belirler. İki değer alır; normal ve reverse. reverse tanımlandığında sıralama yönü normalin tam tersine döner.

#esnekKutuKapsul{
 display: box;
 display:-webkit-box;
 display:-moz-box;
 box-orient:vertical;
 -moz-box-orient:vertical;
 -webkit-box-orient:vertical;
 box-direction: reverse;
 -moz-box-direction: reverse;
 -webkit-box-direction: reverse;
 width:200px;
 height:600px;
 border:1px solid #03C;
}

Yukarıdaki örnekte sıralama yukarıdan aşağı Esnek Kutu1, Esnek Kutu2 ve Esnek Kutu3 iken box-direction: reverse; tanımı ile sıralama Esnek Kutu3, Esnek Kutu2 ve Esnek Kutu1 şeklini almıştır.

Not: box-orient ve box-direction yerine ikisini kapsayan flex-direction üzerinde çalışılmaktadır.

flex-direction lr, rl, tb, bt, inline, inline-reverse, block ve block-reverse değerlerini alabilecek. sol(left – l), sağ(right – r), üst(top – t) ve alt(bottom – b) kısaltmaları kullanılmıştır. CSS3’ün birçok özelliği üzerinde halen çalışılan canlı bir yapıdır. Değişikliklerin olabileceği dikkate alınmalıdır.

box-pack

Yapısı : box-pack: <deger>
Aldığı Değerler : start | end | center | justify
Başlangıç değeri: start
Uygulanabilen elementler: display:box ve display:inline-box değeri alan elemanlara
Kalıtsallık: Yok

box-pack özelliği kapsayıcı kutunun içindeki esnek kutuların kapsayıcıya göre konumunu belirlemek için kullanılır. Dört adet değer alır başlangıç(start), son(end), ortalı(center) ve iki yana yasla(justify)

Alt elemanların genişliğinin kapsayıcı elemandan küçük olduğu durumlarda kalan boşluk alanına göre değerlendirme yapılır.

Bu özellik tanımı 2009’da tanımlandı şu an yenileniyor flex-pack olarak değişecek. Tarayıcılar destekleyen kadar bu şekilde devam edecek.

    #esnekKutuKapsul{
     display: box;
     display:-webkit-box;
     display:-moz-box;
     width:600px;
     border:1px solid #03C;
     box-pack:center;
     -webkit-box-pack:center;
     -moz-box-pack:center;
    }

box-align

Kapsayıcı elemana atanan box-orient değerine göre kalan boşluğa göre hizalama yapmak için kullanılır.

Beş adet değer alır. stretch | start | end | center | baseline Başlangıç değeri stretch’dir; bunun anlamı box-orient değeri horizontal ise stretch uygulanan elemanın alt elemanlarının yükseklikleri yayılacaktır, eğer box-orient değeri veritcal ise genişlikleri yayılacaktır. start ve end değerleri eğer horizantal tanımlı ise sol ve sağa yaslayacaktır, vertical tanımlı ise üste ve alta yaslayacaktır. center değeri ise ortalayacaktır.

    #esnekKutuKapsul{
     display: box;
     display:-webkit-box;
     display:-moz-box;
     width:600px;
     border:1px solid #03C;
     box-orient:horizantal;
     -moz-box-orient:horizantal;
     -webkit-box-orient:horizantal;
     box-align: center;
     -webkit-box-align: center;
     -moz-box-align: center;
    }
    .esnekKutu{
     background-color:#999999;
     width:150px;
     height:150px;
     margin-right:15px;
    }

box-lines

Esnek Kutu Yerleşimi ile yerleştirilen kutular genelde bir eksen üzerinde blok halinde hareket eder, blox-line özellik bu elemanların alt satıra geçip geçmemesini ayarlar. İki değer alır.

• single: Başlangıç değerdir. Bu değeri alan kutular kapsayıcı eleman üzerine taşma yapacaktır. Taşma durumunu kontrol etmek için overflow özelliği kullanılabilir.
• multiple: Bu değer alan kutular tek satırda kendini sınırlamayacaklardır ve ikinci satıra inecektir.

Şu anki tarayıcılar bu özelliği henüz desteklemiyor. İE10 desteklediğine dair duyumlar var.

Yenilenen EKYM standartlarında box-line özelliği görünmüyor. Onun yerine benzer etki yapacak flex-flow tanımı gelecek gibi.

box-ordinal-group

box-ordinal-group özelliği kapsayıcı kutunun içindeki esnek kutuların sıralamasını belirlememizi sağlar.

#esnekKutu1 {
    box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    background-color:#0CF;
}
#esnekKutu3 {
    box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    background-color:#9C3;
}
#esnekKutu4 {
    box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    background-color:#FC9;
}

Dört adet kutumuz var. Bunların üç tanesine box-ordinal-group değeri tanımladık.

EsnekKutu1 ve EsnekKutu3 için 2 değeri tanımladık bunlar ikinci sırada gelecek. EsnekKutu4’e 1 değer tanımladık, buda ilk sırada gelecek. EsnekKutu2 için bir tanım yapmadık buda başlangıç değeri olan 1 değerini almasına neden olacaktır. Buna göre sıralama 2,4,1,3 şeklinde olacaktır.

Bu özellik bize sıralama konusunda tam bir kontrol sağlamaktadır.

Yeni EKYM standardında box-ordinal-group yerine flex-order özellik ismi kullanılması düşünülmektedir.

box-flex

blox-flex özelliği tanımlanması durumunda alt elemanların esnek davranmasını sağlar. Tanım yapılmadığında ise alt elemanlar esnek olmaz.

Hesaplamanın mantığı şöyledir;

Gruptaki tüm esnek kutuların box-flex değeri toplanır ve her kutu için toplam boşluk genişliği(Kapasayıcı eleman ile kutuların genişliği toplamı arasındaki fark) bu sayıya bölünerek elde edilen değer kutu genişliğini belirler.

#esnekKutuKapsul {
     background: gray;
    border: blue;
    display: box;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-box;
   width:100%;
}
.esnekKutu {
   background-color:#999999;
   height:150px;
}
#esnekKutu1 {
    background-color:#0CF;
    border: orange solid 1px;
    box-flex: 2;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -ms-box-flex: 2;
}
#esnekKutu2 {
    background: lightgray;
    border: red solid 1px;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
#esnekKutu3 {
    background-color:#9C3;
    border: red solid 1px;
    box-flex: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-box-flex: 0;
}
#esnekKutu4 {
    background-color:#FC9;
    border: red solid 1px;
}

Daha sabit bir örnek verelim; genişliği 600px olan kapsayıcı eleman ve  üç adet 100px’lik kutumuz olsun(Bu durumdan boşluk değeri 300px olacaktır), bunların box-flex değerleri 1 olsun, her bir kutunun genişliği 200px(100 + 300/3 * 1 = 200) olacaktır. Eğer bu kutulardan bir tanesinin box-flex değeri 2 olarak değiştirilirse, değiştirilen kutunun genişliği 250px(100 + 300/4 * 2 = 250) olurken diğer iki kutunun genişliği 175px(100 + 300/4 * 1 = 175) olacaktır.

#esnekKutuKapsul {
     background: gray;
    border: blue;
    display: box;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-box;
   width:600px;
}
.esnekKutu {
   background-color:#999999;
   height:150px;
     width:100px;
}
#esnekKutu1 {
    background-color:#0CF;
    box-flex: 2;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -ms-box-flex: 2;
}
#esnekKutu2 {
    background: lightgray;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
#esnekKutu3 {
    background-color:#9C3;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}

Eğer kutu genişlikleri toplamı kapsayıcı kutunun genişliğinden büyük ise genişlik hesaplamasında benzer birim hesabına göre küçülme olacaktır. 0 değeri kutunun esnek olmayacağı anlamına gelir.

Raphael Goetter’ın yaptığı örnek bu işin geleceği hakkında bize güzel bir ipucu veriyor. Fantastik örnekler.(Chrome da daha iyi gözüküyor)

box-flex özelliği 2009 yılındaki standartlardaki hali idi, yenilenen standartlarda box-flex vede box-flex-group özelliklerini kapsayan flex() fonksiyonu ile yenilenmektedir.

Sonuç

Gerek CSS3 ve gerekse EKYM yeni özellikler ve hala gelişmektede olan mecralar. Benim burada anlatmak istediğim CSS3’ün en büyük yeniliklerinden biri olan sayfa planlamaya yönelim yeniliklerine bir göz atmak, mantığını kavramak, geleceğe dair fikir edinmeyi sağlamaktır. Ben burada sadece EKYM anlattım, ancak CSS3 ile sayfa planlamaya yönelik başka modüllerde geliştirilmekte; Çoklu Kolonlar(Multiple Column), Izgara Yerleşim Modeli(Grid Layout), Şablon Yerleşim Modeli(Template Layout Model), CSS Exclusions Module, CSS regions Module

CSS3 ile sayfa yerleşimi daha kolay olacağı kesin, bu konuda bir çok modül üzerinde çalışma bitmek üzere veya bitmiş bulunmakta. Gelecekte daha güzel şeyler olacağı kesin.

Yukarıda özelliklerin nasıl kullanıldığını göstermek için daha basit örneklerler verdik, daha karmaşık örneklerde yapılabilir http://oli.jp/2011/css3-flexbox/ sitesindeki örnekler incelenebilir.  

Kalın sağlıcakla

Kaynaklar

• http://www.html5rocks.com/en/tutorials/flexbox/quick/ (güzel)
• http://www.css3.info/introducing-the-flexible-box-layout-module/
• http://www.w3.org/TR/css3-flexbox/
• http://dev.w3.org/csswg/css3-flexbox/
• http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/
• http://www.456bereastreet.com/archive/201103/the_css3_flexible_box_layout_flexbox/
• http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
• http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1/
• http://ie.microsoft.com/testdrive/html5/flexin/default.html
• http://htmlrockstars.com/blog/the-flexible-box-layout-module-css3/
• http://blog.w3conversions.com/2011/02/css3-flexible-box-model-layout-coolness-also-oddities-confusion/
• http://www.netmagazine.com/tutorials/css3-flexible-box-model-explained
• http://adactio.com/journal/4778/
• http://www.vanseodesign.com/css/flexbox/ (güzel)
• http://oli.jp/2011/css3-flexbox/ (karmaşık yerleşim uygulamalı)
• http://blog.isotoma.com/2010/08/css3-flexbox/
• http://www.w3schools.com/css3/css3_reference.asp#box
• http://portfo.li/madebyted/477862-css3-flexible-box-layout-module-aka-flex-box-introduction-and-demos-test-cases
• http://ontwik.com/css/css-3-the-flexible-box-model/ (video)
• http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSFlexBox (güzel)
• http://caniuse.com/flexbox (tarayıcı desteği)
• http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/

“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.”

W3C bu durum için bu kabulü bir özelliğe atadı ve bize seçme imkanı tanıdı. Artık biz kutu modelinin nasıl davranacağını seçebileceğiz.

box-sizing özelliği bize kutunun genişliğinin border ve padding değerlerinin içerip içermemesi gerektiğini tanımlama imkanı sağlıyor. İki adet değeri var

• content-box: Normal kabul halidir. Genişlik veya yükseklik değeri içerik alanını içerir; border ve padding değerlerini içermez.
• border-box: IE kutu kabulü diyede adlandırabileceğimiz değer. Genişlik veya yükseklik değeri padding ve border değerlerinide içerir.

#kutu{
  display:block;
  border:10px solid #069;
  padding:20px;
  width:200px;
  height:200px;
  background:#CCC;
}

Başlangıç değeri content-box’dır. Kutu genişliği 10px + 20px + 200 + 20 + 10px = 260px olacaktır.

Farklı tarayıcılar önek ile destek sağlamaktadır. Firefox(-moz-), Chrome(-webkit-) ve Safari (-webkit-) Yukarıdaki koda box-border tanımı yapıldığında

#kutu{
  display:block;
  border:10px solid #069;
  padding:20px; width:200px;
  height:200px;
  background:#CCC;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:box-border;
}

Kutunun genişlik değeri 200px olacaktır. İçerik alanı genişlik değeri ise 140px olacaktır.

Her iki değerin kullanılabileceği yerler vardır. border-box tanımının esnek yapılı alanlarda bize avantaj sağlayacağı kesindir.

.kutuSol{
 float: left;
 width: 30%;
 background-color: pink;
 border: 3px red dotted;
 height: 150px;
}
.kutuSag{
 float: left;
 background-color: lightgreen;
 width: 70%;
 border: 3px green dotted;
 height: 150px;
}

Esnek yapılı bir içerikte genişlik tanımlarımızı yüzde olarak verdiğimizde ve de padding ve border tanımı yaptığımızda kutularımızın genişliği toplamı %100 olmasına rağmen padding ve border değerleri nedeni ile kapsayıcı eleman içine sığmayacaktır. Burada genişlik değerini padding ve border değerlerini çıkarıp hesaplama imkanımızda yoktur. En azından calc() özelliği tam desteklenene kadar yoktur.

Çözüm olarak box-border tanımı ile sorunumuza çözüm üretebiliriz.

.kutuSol{
 float: left;
 width: 30%;
 background-color: pink;
 border: 3px red dotted;
 height: 150px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:box-border;
}
.kutuSag{
 float: left;
 background-color: lightgreen;
 width: 70%;
 border: 3px green dotted;
 height: 150px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:box-border
}

Farklı araçlar ile web sayfaları gezilmeye başlayalı beri esnek yapılı sayfalar revaçtadır. Websitelerimizi artık daha esnek planlamak zorunda kalacağız. Bu durumda bu özellik bize çok büyük yararlar sağlayacaktır.

Trayaıcı destek listesinde görüldüğü gibi sorun sadece ie7 sürümü ve aşağısında yaşanmaktadır.

ie7 için http://webfx.eae.net/dhtml/boxsizing/implementation.html sitesindeki script ile çözüm üretilebilir.

Daha basit bir çözüm olarak ie7 için padding değerleri % cinsinden verilebilir. Ayrıca html doküman garip modda kullanılır. Graip mod çözümü pek mantıklı değilsede bazı durumlarda başvurulabilir.

Kalın sağlıcakla

Kaynaklar

• http://www.456bereastreet.com/archive/201104/controlling_width_with_css3_box-sizing/ (güzel)
• http://caniuse.com/css3-boxsizing (tarayıcı destek listesi)
• http://helephant.com/2008/10/20/css3-box-sizing-attribute/ (güzel)
• http://aninnovativeweb.tumblr.com/post/770432002/understanding-css3-box-sizing
• http://www.w3.org/TR/css3-ui/#box-sizing
• http://www.goldentwine.com/blog/css3-user-interface-box-sizing
• http://csshead.com/controlling-width-with-css3-box-sizing/
• http://css-tricks.com/7323-box-sizing/
• https://www.youtube.com/watch?v=rNqqfMJnpKY&feature=related (video)
• http://maymay.net/blog/2004/10/28/observations-on-the-css3-box-sizing-property-and-how-designers-use-style-sheets/
• http://www.w3cplus.com/content/css3-box-sizing (çince)

CSS değerleri listesine yeni ve fonsiyornel bir ekleme olacaktır calc(). Hesap Makinesi(Calculator) kelimesinden türetilen bu değer sayesinde css özelliklerine atanan değerlerde hesaplama yapabileme imkanı sağlayacaktır.

Toplama(+), çıkarma(-), çarpma(*), bölme(/) ve modül(mod) kullanma imkanı sağlıyor.

Daha önce yaşadığımız bir çok sorunun üstesinden bu değer sayesinde geleceğiz.

Genelde esnek yapılı alanlar ve sayfa düzeni oluştururken göreceli değer ve sabit margin, padding ve border tanımları ile sorun yaşarız.

#sagKolon{
  width:calc(300px - 1em);
  width:-moz-calc(300px - 1em);
  float:left;
  background-color:#CC9933;
}

Firefox önek(-moz-) ile bu değeri desteklerken İnternet Explorer standartlardaki şekli destekler.

Örneğinde görüldüğü gibi calc() bu tip sorunlarımızın ilacı olacaktır.

Birden fazla işlem içinde kullanıma izin vardır.

div {
    width: calc(100% - 20px + 2px*2);
}

İşlem sırası matematik ve javascriptten bildiğimiz gibi çarpma, bölme, mod, toplama , çıkarma sıralaması ile olur.

p {
    margin: calc(1rem - 2px) calc(1rem - 1px)
}

şeklinde margin üst/alt ve sağ/sol tanımları yapılabilir.

Tarayıcı Desteği

Baştada belirttiğimiz gibi şu an sadece Firefox4 ve İnternet Explorer 9 ve üstü sürümleri destek sağlıyor. Microsoft’tan böyle bir destek beklemiyordum açıkçası. Webkit ve Opera desteğini en yakın zamanda bekliyorum.

Kaynaklar

• http://webdesignernotebook.com/css/the-wonderful-calc-function/
• http://hacks.mozilla.org/2010/06/css3-calc/
• http://msdn.microsoft.com/en-us/library/ms537660(v=vs.85).aspx (ie9 destekliyor)
• https://developer.mozilla.org/en/CSS/-moz-calc
• http://caniuse.com/calc (destek listesi)
• http://mynthon.net/howto/-/webdev/css3-testsuite-calc-property-for-calculating-size.txt (örnek)
• http://bloqk.com/makale/css_calc_kullanimi.html
• http://www.thecssninja.com/demo/css_calc/ (örnek)
• http://www.sitepoint.com/css3-calc-function