[JS] Externe stylesheet aanroepen met js - valid xhtml

[tjmv]

Ik vind het er leuker uitzien als m'n pagina's goed door de w3c validator komen, dus zonder errors. Ik heb net de betreffende website door de validator gehaald, en daar kwam een foutje uit wat ik eigenlijk ook wel verwachtte. Het is namelijk niet toegestaan om een externe stylesheet aan te roepen via javascript, athans niet op de normale manier.

Ik wou hiermee een browser-detector maken, omdat de browsers verschillend omgaan met groottes, en verder heeft IE wat problemen met CSS..

Een alternatieve methode, met html/css werkt niet, iig ik kan er geen vinden in dit lijstje die alleen voor firefox of alleen voor opera is.


Normaal roep je een externe stylesheet natuurlijk op met iets als dit:

code:

<link rel="stylesheet" rev="stylesheet" type="text/css" href="stylesheet.css" />

Dus ik dacht dat hetzelfde ,maar dan via javascript dus ook op die manier moest:

code:

<script type="text/javascript">document.write('<link rel="stylesheet" type="text/css" href="stylesheet.css" />'); }</script>

Maar dat slikt de validator dus niet. En de hele stylesheet daar gaan neerplanten heb ik ook geen zin in, en tevens is het voordeel van de externe stylesheet ook weg.


Ik heb op google gezocht naar iets vergelijkbaars, maar ik ben het niet tegengekomen. Ben ik de enige die dit zo doet ofzo? Dus.. Heeft iemand een oplossing/alternatief?

[BtM909]

Officieel (en dat merk je ook als je je XHTML echt als XHTML verstuurd) werkt document.write niet meer. Hixie heeft hier ooit wat over geschreven.

[tjmv]

BtM909 schreef op zaterdag 17 september 2005 @ 21:37:
Officieel (en dat merk je ook als je je XHTML echt als XHTML verstuurd) werkt document.write niet meer. Hixie heeft hier ooit wat over geschreven.

Pff.. Waarom heb ik daar nou niet aan gedacht. Bedankt voor de informatie.

Ik dus op zoek naar een alternatief voor document.write, dus ik typ xhtml document.write in op google, en voila, meteen de tweede link, iemand met een zelfde probleem.

Ik gebruik nu dit:

code:

<script>
    if(is_ie) {
      if (document.getElementById) {
      var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
      l.setAttribute("rel", "stylesheet");
      l.setAttribute("type", "text/css");
      l.setAttribute("href", "styles/ie.css");
      l.setAttribute("media", "screen");
      document.getElementsByTagName("head")[0].appendChild(l);
      }
    } else if(is_opera) {
      if (document.getElementById) {
      var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
      l.setAttribute("rel", "stylesheet");
      l.setAttribute("type", "text/css");
      l.setAttribute("href", "styles/opera.css");
      l.setAttribute("media", "screen");
      document.getElementsByTagName("head")[0].appendChild(l);
      }
    } else if(is_nav) {
      if (document.getElementById) {
      var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
      l.setAttribute("rel", "stylesheet");
      l.setAttribute("type", "text/css");
      l.setAttribute("href", "styles/ff.css");
      l.setAttribute("media", "screen");
      document.getElementsByTagName("head")[0].appendChild(l);
      }
    }
  </script>

Dit is dus ook weer opgelost

[Verwijderd]

Beetje overbodig veel code, but does the job

[crisp]

Tsja; je kan de browser-afvragingen natuurlijk ook met een || combineren, of nog beter: laat die browser-sniffing gewoon compleet achterwege. This should work fine:

JavaScript:

if (document.getElementById && document.createElementNS)
{
      var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
      l.setAttribute("rel", "stylesheet");
      l.setAttribute("type", "text/css");
      l.setAttribute("href", "styles/style.css");
      l.setAttribute("media", "screen");
      document.getElementsByTagName("head")[0].appendChild(l);
}

Verschillende stylesheets voor verschillende browsers is vaak niet nodig; zeker Opera en Ff kunnen prima dezelfde styles sharen. Voor IE zou je nog conditional comments kunnen overwegen om een extra stylesheet in te laden die specifieke zaken voor IE fixed, maar dan nog zou ik een algemene default stylesheet aanhouden met de basis zodat je niet allerlei zaken dubbel zit te specificeren - CSS is niet voor niets 'cascading'.

[tjmv]

crisp schreef op zondag 18 september 2005 @ 11:56:

Verschillende stylesheets voor verschillende browsers is vaak niet nodig; zeker Opera en Ff kunnen prima dezelfde styles sharen.

Tja, normaal gesproken wel. Maar dit keer gingen de browsers iets anders om met pixels en min-height.

Voor IE zou je nog conditional comments kunnen overwegen om een extra stylesheet in te laden die specifieke zaken voor IE fixed, maar dan nog zou ik een algemene default stylesheet aanhouden met de basis zodat je niet allerlei zaken dubbel zit te specificeren - CSS is niet voor niets 'cascading'.

Daarom heb ik in de stylesheet voor ie, firefox en opera ook maar een paar dingen staan (iig <20 regels).

[ Voor 39% gewijzigd door tjmv op 19-09-2005 17:22 ]