Cross-browser: Atpazīstam un mērķējam uz konkrētu pārlūku

1268116214-cross_browser.jpgLaiciņu atpakaļ es rakstīju, kā atpazīt IE versijas ar CSS palīdzību.
Šoreiz raksts tiks veltīts arī citu pārlūku atpazīšanai izmantojot PHP, CSS, HTML un jQuery.

Sāksim ar HTML. Ir tāda lieta kā IE conditional comments, tie ir speciāli HTML tagi ar kuriem var pievērst uzmanību Internet Explorer pārlūkam. Turpinājumā daži piemēri.
<!--[if IE]>
Šis parādīsies visiem IE lietotājiem.
<![endif]-->
<!--[if IE 6]>
Šo teikstu redzēs tikai IE6 lietotāji.
<![endif]-->
<!--[if gte IE 6]>
Šo redzēs IE6 un augstākas versijas.
<![endif]-->
<!--[if lt IE 6]>
Šo neredzēs IE6, bet zemākas versijas redzēs.
<![endif]-->
<!--[if lte IE 6]>
Šis parādīsies IE6 un zemākām versijām.
<![endif]-->
<!--[if gt IE 6]>
Šo neredzēs IE6, bet augstākas versijas gan!
<![endif]-->

<!--[if (IE 6)|(IE 7)]>
 Šis ir interesantāks, jo šo redzēs tikai IE6 un IE7 lietotāji.
 <![endif]-->
 
<!--[if !IE 6]>
 Šo redzēs visi, kas nelieto IE6.
 <![endif]-->

<!--[if !IE]>
 Bet šo redzēs visi, kas nelieto IE.
 <![endif]-->  
Piezīme: Augstāk esošajos piemēros IE 6 vietā vari likt jebkuru citu IE versiju.

Kā ar CSS palīdzību mērķēt uz konkrētām IE versijām:
#kautkadsElements {
  width:200px; /* Visi pārlūki */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */
 }
Piezīme: Sintaksei jābūt sakārtotai tā, kā ir piemērā.

Kā ar CSS palīdzību mērķēt uz Operu:
@media all and (){
    .kautkadsElements {color: #333333;}
}


Kā ar CSS palīdzību mērķēt uz Google Chrome:
body:nth-of-type(1) .kautkadsElements {color: #333333;}


Kā ar CSS palīdzību mērķēt uz Safari:
html:lang(en)>body  .kautkadsElements {color: #333333;}


“Browser Detect” PHP klase:
Ar šo PHP klasi ir iespējams noteikt vairāk kā 20 pārlūkus, ļoti noderīga, ka negribi čakarēties ar get_browser funkciju.
Lejupielāde šeit.

Pārlūku noteikšana ar jQuery:
Ļoti lielisks un ērts lietošanā jQuery spraudnis. Piemēri un pamācības lejupielādes lapā.
Lejupielāde šeit.

Noslēgumā mazs triks kā uztaisīt IE6 avāriju.
<style>*{position:relative}</style><table><input></table>


Iepriekšējie Cross-browser raksti:
Cross-browser: CSS reset

0 komentāri

Lai pievienotu komentāru, tev ir jābūt autorizētam lietotājam! Reģistrējies, vai ienāc!
Padalies