lostyazilim
tr.link

CSS Expression'lardan Kurtulmak?

11 Mesajlar 3.250 Okunma
acebozum
tr.link

SuhaMete SuhaMete SEO Danışmanı Kullanıcı
  • Üyelik 31.05.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek SEO Danışmanı
  • Konum İstanbul Avrupa
  • Ad Soyad K** M**
  • Mesajlar 2548
  • Beğeniler 21 / 535
  • Ticaret 76, (%100)
Merhaba arkadaşlar, aşağıda bir css kodu verdim. İçinde 4 adet css expression var. Css expression nedir ve bunları yok edip aynı işlevi gene yaptırabilir miyim? Optimize edilmesi gereken şeyler gibi geldi bana.

#TB_window
{
font:12px "Open Sans",sans-serif;
color:#333
}
#TB_secondLine
{
font:10px "Open Sans",sans-serif;
color:#666
}
.rtl #TB_window,.rtl #TB_secondLine
{
font-family:Tahoma,sans-serif
}
:lang(he-il) .rtl #TB_window,:lang(he-il) .rtl #TB_secondLine
{
font-family:Arial,sans-serif
}
#TB_window a:link
{
color:#666
}
#TB_window a:visited
{
color:#666
}
#TB_window a:hover
{
color:#000
}
#TB_window a:active
{
color:#666
}
#TB_window a:focus
{
color:#666
}
#TB_overlay
{
position:fixed;
z-index:510;
top:0;
left:0;
height:100%;
width:100%
}
.TB_overlayMacFFBGHack
{
background:url(macFFBgHack.png) repeat
}
.TB_overlayBG
{
background-color:#000;
-ms-filter:"alpha(opacity=75)";
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75
}
* html #TB_overlay
{
position:absolute;
height:expression(document.body.scrollHeight>document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight+'px')
}
#TB_window
{
position:fixed;
background:#fff;
z-index:510;
color:#000;
visibility:hidden;
text-align:left;
top:50%;
left:50%;
border:1px solid #555;
-moz-box-shadow:rgba(0,0,0,1) 0 4px 30px;
-webkit-box-shadow:rgba(0,0,0,1) 0 4px 30px;
-khtml-box-shadow:rgba(0,0,0,1) 0 4px 30px;
box-shadow:rgba(0,0,0,1) 0 4px 30px
}
* html #TB_window
{
position:absolute;
margin-top:expression(0 - parseInt(this.offsetHeight/2)+(TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)+'px')
}
#TB_window img#TB_Image
{
display:block;
margin:15px 0 0 15px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-top:1px solid #666;
border-left:1px solid #666
}
#TB_caption
{
height:25px;
padding:7px 30px 10px 25px;
float:left
}
#TB_closeWindow
{
height:25px;
padding:11px 25px 10px 0;
float:right
}
#TB_closeAjaxWindow
{
padding:6px 10px 0;
text-align:right;
float:right
}
#TB_closeAjaxWindow a
{
text-decoration:none
}
#TB_ajaxWindowTitle
{
float:left;
padding:6px 10px 0
}
#TB_title
{
background-color:#e8e8e8;
height:27px
}
#TB_ajaxContent
{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em
}
#TB_ajaxContent.TB_modal
{
padding:15px
}
#TB_ajaxContent p
{
padding:5px 0 5px 0
}
#TB_load
{
position:fixed;
display:none;
z-index:103;
top:50%;
left:50%;
background-color:#e8e8e8;
border:1px solid #555;
margin:-45px 0 0 -125px;
padding:40px 15px 15px
}
* html #TB_load
{
position:absolute;
margin-top:expression(0 - parseInt(this.offsetHeight/2)+(TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)+'px')
}
#TB_HideSelect
{
z-index:99;
position:fixed;
top:0;
left:0;
background-color:#fff;
border:0;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
height:100%;
width:100%
}
* html #TB_HideSelect
{
position:absolute;
height:expression(document.body.scrollHeight>document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight+'px')
}
#TB_iframeContent
{
clear:both;
border:0;
margin-bottom:-1px;
_margin-bottom:1px
}
.tb-close-icon
{
height:16px;
margin:-3px -3px 0 0;
width:16px
}
.tb-close-icon:before
{
content:'\f158';
color:#ccc;
font:normal 20px/1 'dashicons';
speak:none;
vertical-align:middle;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.tb-close-icon:hover:before
{
color:#fff
}

 

 

wmaraci
reklam

SuhaMete SuhaMete SEO Danışmanı Kullanıcı
  • Üyelik 31.05.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek SEO Danışmanı
  • Konum İstanbul Avrupa
  • Ad Soyad K** M**
  • Mesajlar 2548
  • Beğeniler 21 / 535
  • Ticaret 76, (%100)
Var mıdır bilen?
 

 

cgrclk cgrclk Fortis Fortuna Adiuvat Kullanıcı
  • Üyelik 18.11.2011
  • Yaş/Cinsiyet 35 / E
  • Meslek Web Developer
  • Konum İstanbul Avrupa
  • Ad Soyad B** Ç**
  • Mesajlar 3270
  • Beğeniler 1014 / 1983
  • Ticaret 53, (%100)
Ben de hiç bilmiyorum bu konuyu. Yarın bir araştırma yapayım.
 

 

SuhaMete SuhaMete SEO Danışmanı Kullanıcı
  • Üyelik 31.05.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek SEO Danışmanı
  • Konum İstanbul Avrupa
  • Ad Soyad K** M**
  • Mesajlar 2548
  • Beğeniler 21 / 535
  • Ticaret 76, (%100)

cgrclk adlı üyeden alıntı

Ben de hiç bilmiyorum bu konuyu. Yarın bir araştırma yapayım.


gtmetrix optimize et diyor, ben de baktım bir iki şey ama css kodlarının içerisine js mi girmiş anlamadım :D
cgrclk

kişi bu mesajı beğendi.

wmaraci
wmaraci

MehmetARIK MehmetARIK Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 26.01.2014
  • Yaş/Cinsiyet 41 / E
  • Meslek Öğretmen
  • Konum İstanbul Anadolu
  • Ad Soyad M** A**
  • Mesajlar 626
  • Beğeniler 13 / 260
  • Ticaret 2, (%100)
Bunlar eski tarayıcılar veya mobil için kullanılıyor ya. Mesela bu:
height:expression(document.body.scrollHeight>document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight+'px')
}
Tarayıcı boyutuna göre boyutlandırma yapıyor. Bunu yaparkende Scroll Bar'ı referans alıyor. Scroll bar sayfa yüksekliğinden büyükse sayfayı scroll bar ile aynı boyuta getir diyor.
IE 6-7 gibi yada eski sürüm Safarilerde kullanılıyor. Eski sürümler yeni CSS kodlarını tanımadığı için buna başvuruluyor.
 

 

SuhaMete SuhaMete SEO Danışmanı Kullanıcı
  • Üyelik 31.05.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek SEO Danışmanı
  • Konum İstanbul Avrupa
  • Ad Soyad K** M**
  • Mesajlar 2548
  • Beğeniler 21 / 535
  • Ticaret 76, (%100)

Mehmet ARIK adlı üyeden alıntı

Bunlar eski tarayıcılar veya mobil için kullanılıyor ya. Mesela bu:
height:expression(document.body.scrollHeight>document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight+'px')
}
Tarayıcı boyutuna göre boyutlandırma yapıyor. Bunu yaparkende Scroll Bar'ı referans alıyor. Scroll bar sayfa yüksekliğinden büyükse sayfayı scroll bar ile aynı boyuta getir diyor.
IE 6-7 gibi yada eski sürüm Safarilerde kullanılıyor. Eski sürümler yeni CSS kodlarını tanımadığı için buna başvuruluyor.


Evet gtmetrix'teki açıklama da eskilerle alakalı olduğuna bayağo değiniyordu. Böyle detaylı okumak güzel oldu. Peki bu kodlar gerekli mi? Gerekli değilse hangilerini sileyim hocam? Gerekliyse expression kullanmadan nasıl yapabiliriz?
 

 

MehmetARIK MehmetARIK Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 26.01.2014
  • Yaş/Cinsiyet 41 / E
  • Meslek Öğretmen
  • Konum İstanbul Anadolu
  • Ad Soyad M** A**
  • Mesajlar 626
  • Beğeniler 13 / 260
  • Ticaret 2, (%100)

Süha Mete adlı üyeden alıntı

Evet gtmetrix'teki açıklama da eskilerle alakalı olduğuna bayağo değiniyordu. Böyle detaylı okumak güzel oldu. Peki bu kodlar gerekli mi? Gerekli değilse hangilerini sileyim hocam? Gerekliyse expression kullanmadan nasıl yapabiliriz?


Eğer kendine özel bir temaysa silip yerine aynı işlevi gören CSS kodları ekleyebilirsin. Ama ticari amaçlı bir temaysa, satacaksan yine silip yerine aynı işlevi gören CSS kodlarını ekleyebilirsin fakat dikkat etmen gereken şey orjinalliğini bozmamak. Eski tarayıcıların da anlayacağı dilden eklemektir.

http://www.w3schools.com/cssref/css3_browsersupport.asp
Bu linkten hangi tarayıcı versiyonu hangi CSS kodlarını tanıyor bakabilirsin. Buna göre de kendine hem eskiye hem yeni versiyonlara uygun global bir CSS kodlaması yapabilirsin.

Mesela yeni tarayıcılar opacity:0,8 değerini algılayabiliyorken eskiler için ise filter:alpha(opacity=80);
kullanman gerekiyor.
 

 

SuhaMete SuhaMete SEO Danışmanı Kullanıcı
  • Üyelik 31.05.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek SEO Danışmanı
  • Konum İstanbul Avrupa
  • Ad Soyad K** M**
  • Mesajlar 2548
  • Beğeniler 21 / 535
  • Ticaret 76, (%100)

Mehmet ARIK adlı üyeden alıntı

Eğer kendine özel bir temaysa silip yerine aynı işlevi gören CSS kodları ekleyebilirsin. Ama ticari amaçlı bir temaysa, satacaksan yine silip yerine aynı işlevi gören CSS kodlarını ekleyebilirsin fakat dikkat etmen gereken şey orjinalliğini bozmamak. Eski tarayıcıların da anlayacağı dilden eklemektir.

http://www.w3schools.com/cssref/css3_browsersupport.asp
Bu linkten hangi tarayıcı versiyonu hangi CSS kodlarını tanıyor bakabilirsin. Buna göre de kendine hem eskiye hem yeni versiyonlara uygun global bir CSS kodlaması yapabilirsin.

Mesela yeni tarayıcılar opacity:0,8 değerini algılayabiliyorken eskiler için ise filter:alpha(opacity=80);
kullanman gerekiyor.


Tema benim değil, bu yüzden satmayacağım fakat bu kodları direk silsem veya yerine neler yazabilirim? Dediğimiz gibi bayağı eski tarayıcılar içinse bence gerek de yok, doğru değil mi?
 

 

MehmetARIK MehmetARIK Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 26.01.2014
  • Yaş/Cinsiyet 41 / E
  • Meslek Öğretmen
  • Konum İstanbul Anadolu
  • Ad Soyad M** A**
  • Mesajlar 626
  • Beğeniler 13 / 260
  • Ticaret 2, (%100)
Sendeki kodlar şöyle.
Açılan pencereyi standart sayfa yüksekliğinin yarısı boyutuna getiriyor. Ardından eğer içerik açılan pencere boyutundan daha yüksekse, içeriği pencere boyutuna göre küçültüyor. Böylelikle açılan pencerenin boyutu değişmeden içerik boyutunu ona göre ayarlayabiliyor.
CSS ile scrollbarlara sadece biçim bakımından müdahale edilebiliyor. Yükseklikler ise max min olarak değerlendirilebiliyor.
İçerik CSS ile boyutlandırılabilir ama scrollbar a müdahale edilemediğinden yapacağın en iyi şey ya o kodları silmek, ya da Javascript dosyası ile onları çağırmak.
Javascript ile çağırırsan katman elementlerinide seçmen gerekli. Nereye uygulanacağını belirtmek maksadıyla.
TB_overlay, TB_window, TB_hideselect ve TB_load için javascript dosyası hazırlamalısın yani.


<script>
function {
document.getElementById('TB_window').value=xx;
document.getElementById('TB_window').style.margin-top="(xx)/";
document.getElementById('xx').value=parseInt(this.offsetHeight/2)+(TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)+'px';
}
</script>

Böyle düşündüm ama inşallah doğru olur. Biraz karışık çünkü yanlış yapmışda olabilirim.
 

 

SuhaMete SuhaMete SEO Danışmanı Kullanıcı
  • Üyelik 31.05.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek SEO Danışmanı
  • Konum İstanbul Avrupa
  • Ad Soyad K** M**
  • Mesajlar 2548
  • Beğeniler 21 / 535
  • Ticaret 76, (%100)

Mehmet ARIK adlı üyeden alıntı

Sendeki kodlar şöyle.
Açılan pencereyi standart sayfa yüksekliğinin yarısı boyutuna getiriyor. Ardından eğer içerik açılan pencere boyutundan daha yüksekse, içeriği pencere boyutuna göre küçültüyor. Böylelikle açılan pencerenin boyutu değişmeden içerik boyutunu ona göre ayarlayabiliyor.
CSS ile scrollbarlara sadece biçim bakımından müdahale edilebiliyor. Yükseklikler ise max min olarak değerlendirilebiliyor.
İçerik CSS ile boyutlandırılabilir ama scrollbar a müdahale edilemediğinden yapacağın en iyi şey ya o kodları silmek, ya da Javascript dosyası ile onları çağırmak.
Javascript ile çağırırsan katman elementlerinide seçmen gerekli. Nereye uygulanacağını belirtmek maksadıyla.
TB_overlay, TB_window, TB_hideselect ve TB_load için javascript dosyası hazırlamalısın yani.


<script>
function {
document.getElementById('TB_window').value=xx;
document.getElementById('TB_window').style.margin-top="(xx)/";
document.getElementById('xx').value=parseInt(this.offsetHeight/2)+(TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)+'px';
}
</script>

Böyle düşündüm ama inşallah doğru olur. Biraz karışık çünkü yanlış yapmışda olabilirim.


Bunun kontrolünü az önce verdiğiniz linkle yapıyorum değil mi? Eski tarayıcıları seçmem lazım herhalde? Önce sileceğim sıkıntı olmazsa öyle devam edeceğim olursa sıkıntı bu js i denerim. Ayrıca turizm teması için bir pm alabilir miyim?
 

 

Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al