Gebruik Conditional Comments om content niet te tonen - Softwareontwikkeling

vrijdag 17 maart 2006 12:42

Acties:

Topicstarter

Wij hebben 2 uploadcomponenten gekocht, eentje die gebruik maakt van activex waarbij je folders kan drag-droppen, en eentje die gebruikt maakt van java (zonder drag-drop). Nu was het plan om door gebruik van beide zonder useragent detection alle browsers te ondersteunen. Ik kon echter niet iets bruikbaars vinden op google.

Met IE Conditional Comments kan je code alleen voor bepaalde versies van IE gebruiken, echter de rest van de pagina wordt op elke browser uitgevoerd. Daardoor wordt de Java versie alsnog geladen (en heeft iedereen de java plugin nodig). Niet ideaal dus.

Echter heb ik een manier ontdekt om Conditional Comments te kunnen gebruiken om code te excluden voor IE en dit wilde ik met jullie delen.

Mijn eerste probeersel:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>IE Conditional Comments</title>
</head>

<body>
<p>kop</p>
<!--[if IE]>
    <p>you've got internet explorer</p>
<![endif]-->        
                      
<!--[if !IE]>
<!-- bleh  
    <p>you've  NOT got internet explorer</p>
<![endif]-->              
<p>footer: 4 errors</p>
</body>
</html>

De bleh comment wordt afgesloten door de browser en de paragraaf wordt weergegeven. Echter natuurlijk is dit geen valid html.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>IE Conditional Comments</title>
</head>

<body>
<p>kop</p>
<!--[if IE]>
    <p>you've got internet explorer</p>
<![endif]-->        
                      
<!--[if !IE]>
bleh  -->
    <p>you've  NOT got internet explorer</p>
<![endif]-->              
          
<p>footer: 2 errors</p>
</body>
</html>

Bleh wordt nu wel afgesloten maar the endif CC is nu geen commentaar meer en is dus geen valid html (hoewel het niet weergegeven wordt).

Dit kan echter opgelost worden door gebruik van meer commentaar:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>IE Conditional Comments</title>
</head>

<body>
<p>kop</p>
<!--[if IE]>
    <p>you've got internet explorer</p>
<![endif]-->        
                      
<!--[if !IE]>
bleh  -->
    <p>you've  NOT got internet explorer</p>
<!-- <![endif]-->             
          
<p>footer: valid</p>

</body>
</html>

De CC wordt afgesloten door en weer geopend door commentaar waardoor het valid html is en werkt op de browsers die ik getest heb.

Werkt in:
IE6/win SP2
Firefox 1.5.0.1
Opera 9 build 8212
http://www.yellowpipe.com/yis/tools/lynx/lynxview.cgi

Met deze methode kan je dus EN code speciaal voor IE gebruiken, EN code voor andere browsers gebruiken, zonder dat er iets dubbel uitgevoerd wordt.

[ Voor 32% gewijzigd door Justice op 17-03-2006 12:55 ]

Human Bobby

vrijdag 17 maart 2006 12:45

Acties:

djluc

Welke componenten heb je gekocht en hoe bevallen ze?

vrijdag 17 maart 2006 17:46

Acties:

Justice

Topicstarter

We zijn Xupload en Jupload aan het evalueren op dit moment voor een Virtual Learning Environment, waarbij Xupload gebruikt wordt voor IE en Jupload voor overige browsers en platformen.

alleen Xupload ondersteund drag-drop, en we wilden niet dat iedereen zijn Java plugin ging laden of moeten installeren. Vandaar de oplossing. (nog niet getest met deze plugins trouwens).

Human Bobby