发表新帖
发表新帖

Embedding extra styles with noscript

前端 未结
关注
7 1717
盖世英雄少女心
盖世英雄少女心 2020-12-08 05:18

I have an XHTML strict page that has an invisible div that is controlled by Javascript. The div is set to transparent and visible by the script and a mouseover event to make

相关标签:
7条回答
  • 有刺的猬
    2020-12-08 05:50

    Note about my answer

    I wrote this post after realizing it was dating from 2008

    Since I had a similar problem, I thought continuing answering with a current answer.

    My actual answer

    Like Boby Jack said, style tag is not allowed in body. I myself did the exact thing as you (Joshua) about it. But Jack's "progressive enhancement" made me without non-abstract solution but then I realized a solution that I did not find answers on this thread.

    It all depends of your styling structure.

    My suggestion is to plainly use something like modernizr in the very begining of the head and use Paul Irish's HTML5Boilerplate recommendations.

    Long story short

    1. Html tag has a class attributes with no-js
    2. Head tag includes a first modernizr javascript as the first
    3. CSS has the element (.hide-me) with display:none on its proper place
    4. Then .no-js .hide-me { display:block }

    In detail

    See Paul Irish's HTML5boilerplate, and adapt it to XHTML if you want :)

    1. Html has a class attributes with .no-js

    <!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

    quoting from html5boilerplate.com

    2. Head tag includes a first modernizr javascript as the first

    Modernizr execution will build html attributes with what's supported.

    Will build something similar to this:

    <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">

    Note this is from Google Chrome modernizr tests.

    The first is js but if Modernizr did not run (no javascript) the no-js would stay there.

    3. CSS has the element (.hide-me) with display:none on its proper place

    ... you know the rest :)

    0 讨论(0)
 看不清?
提交回复
热议问题