IE (Internet Explorer) versiyonları için Css ve Javascript düzenlemesi

1 Haziran 2015

minimalcoding

1392 0

IE (Internet Explorer) versiyonları için Css ve Javascript düzenlemesi

Arayüz kodlayıcılar için büyük bir sorun teşkil eden internet explorer farklı versiyonlarını için, farklı CSS kodlamaları yapmak gerektirir. İlk kez ie5 te kullanılan şartlı uygulama yönetimini maalesef ki günümüzde hala kullanılmakta :). Şartlı kullanım yöntemiyle ister CSS istersenizde Javascript dosyalarımızı ie tarayıcı versiyonlarına göre yorumlata bilirsiniz.

Koşula Bağlı durumunların operatörleri şu şekilde;

Oparetörler	gt	gte	lt	lte	!
Açıklama	“x versiyon dan büyük”	“x versiyon dan büyük ve eşit”	“x versiyondan küçük”	“x versiyondan küçük veya eşit”	“x versiyon değilse”	“x versiyon ise”
Kullanım	<!–[if gt IE 5.5]>	<!–[if gte IE 5.5]>	<!–[if lt IE 5.5]>	<!–[if lte 5.5]>	<!–[if !IE 5.5]>	<!–[if IE 5.5]>

İnternet Explorer 5.5 için

Css Kullanım Yöntemi




<!--[if IE 5.5000]>
 <style type="text-css">

    a{ color:#F5A623;}
   
 </style>
 
 <link rel=stylesheet href="css/ie5.css">

<![endif]-->

<!--[if IE 5.5000]>

a{ color:#F5A623;}

</style>

<![endif]-->

Javascript Kullanım Yöntemi




<!--[if IE 5.5000]>
<script>

var button =  document.querySelector('a');
button.onclick=function(event){
}
</script>
 
 <script src="js/ie5.js"></script>

<![endif]-->

<!--[if IE 5.5000]>

var button = document.querySelector('a');

button.onclick=function(event){

}

</script>

<![endif]-->

Sadece İnternet Explorer 7 için

Css Kullanım Yöntemi




<!--[if IE 7]>
 <style type="text-css">

    a{ color:#F5A623;}
   
 </style>
 
 <link rel=stylesheet href="css/ie5.css">

<![endif]-->

<!--[if IE 7]>

a{ color:#F5A623;}

</style>

<![endif]-->

Javascript Kullanım Yöntemi




<!--[if IE 7]>
<script>

var button =  document.querySelector('a');
var menu   =  document.querySelector('.drop-menu');

button.onclick=function(event){

    if(!menu.classList.contains('open')){
        menu.classList.add('open')
    }else{
        menu.classList.remove("open")
    }

}
</script>
 
 <script src="js/ie5.js"></script>

<![endif]-->

<!--[if IE 7]>

var button = document.querySelector('a');

var menu = document.querySelector('.drop-menu');

button.onclick=function(event){

if(!menu.classList.contains('open')){

menu.classList.add('open')

}else{

menu.classList.remove("open")

}

</script>

<![endif]-->

İnternet Explorer 8 ve önceki sürümleri için

Css Kullanım Yöntemi




<!--[if lt IE 9]>
 <style type="text-css">

    a{ color:#F5A623;}
   
 </style>
 
 <link rel=stylesheet href="css/ie5.css">

<![endif]-->

<!--[if lt IE 9]>

a{ color:#F5A623;}

</style>

<![endif]-->

Javascript Kullanım Yöntemi




<!--[if lt IE 9]>
<script>

var button =  document.querySelector('a');
var menu   =  document.querySelector('.drop-menu');

button.onclick=function(event){

    if(!menu.classList.contains('open')){
        menu.classList.add('open')
    }else{
        menu.classList.remove("open")
    }

}
</script>
 
 <script src="js/ie5.js"></script>

<![endif]-->

<!--[if lt IE 9]>

var button = document.querySelector('a');

var menu = document.querySelector('.drop-menu');

button.onclick=function(event){

if(!menu.classList.contains('open')){

menu.classList.add('open')

}else{

menu.classList.remove("open")

}

</script>

<![endif]-->

İnternet Explorer 6 ve üst sürümler için

Css Kullanım Yöntemi




<!--[if gt IE 5.5000]>
 <style type="text-css">

    a{ color:#F5A623;}
   
 </style>
 
 <link rel=stylesheet href="css/ie5.css">

<![endif]-->

<!--[if gt IE 5.5000]>

a{ color:#F5A623;}

</style>

<![endif]-->

Javascript Kullanım Yöntemi




<!--[if lt IE 9]>
<script>

var button =  document.querySelector('a');
var menu   =  document.querySelector('.drop-menu');

button.onclick=function(event){

    if(!menu.classList.contains('open')){
        menu.classList.add('open')
    }else{
        menu.classList.remove("open")
    }

}
</script>
 
 <script src="js/ie5.js"></script>

<![endif]-->

<!--[if lt IE 9]>

var button = document.querySelector('a');

var menu = document.querySelector('.drop-menu');

button.onclick=function(event){

if(!menu.classList.contains('open')){

menu.classList.add('open')

}else{

menu.classList.remove("open")

}

</script>

<![endif]-->

IE (Internet Explorer) versiyonları için Css ve Javascript düzenlemesi

Koşula Bağlı durumunların operatörleri şu şekilde;

İnternet Explorer 5.5 için

Css Kullanım Yöntemi

Javascript Kullanım Yöntemi

Sadece İnternet Explorer 7 için

Css Kullanım Yöntemi

Javascript Kullanım Yöntemi

İnternet Explorer 8 ve önceki sürümleri için

Css Kullanım Yöntemi

Javascript Kullanım Yöntemi

İnternet Explorer 6 ve üst sürümler için

Css Kullanım Yöntemi

Javascript Kullanım Yöntemi

Yorum yap