I wanna use the www.modernizr.com project for my site and run into a little question.
A comment in the very beginning of the modernizr.js tells me:
Modernizr tests which native CSS3 and HTML5 features are available in
the current UA and makes the results available to you in two ways:
as properties on a global Modernizr object, and as classes on the
html element. This information allows you to progressively enhance
your pages with a granular level of control over the experience.
So what means "as classes on the html element" ?
I tested it and just use the header element (which is HTML5) in my document and manipulate it via css.
After that i opened it with IE6 and ......YEA it shows correct!
So:
I thought header is and "element" of html not a class of html!? So is this comment in the modenizr.js correct?
Hope you understand my little (or maybe hard to understand) question :)
Regards
What modernizr does is, depending on what your browser support, add classes to the <html> element to let you know (mostly via CSS or even JS) what exactly seems to work properly.
That means, that if my browser doesn't support javascript, I'll get something like this if I inspect the DOM (using, for example, Chrome's profiler)
<html class="no-js ...">...</html>
Hope this helps.
Related
I just installed VS 2012 RC and in the HTML toolbar dropdown it has a bunch of new options:
DOCTYPE: HTML5
HTML5
XHTML5
What's the difference between the two HTML5 options? I thought the recommendation for HTML5 was not to specify a DOCTYPE, so the first option is kinda like "would you like some caffeine with that decaf?"
I was pretty sure that W3C abandoned XHTML in favor of evolving HTML, so what's this new XHTML5 option? Update: seems like Wikipedia had an answer for that.
Thanks in advance!
Update: posted a new question for the unanswered bits.
PS: I am not looking for an explanation of the purpose of the dropdown, but rather an explanation of what the difference is between choosing "DOCTYPE:HTML5" and "HTML5".
Regarding the HTML5 vs. DOCTYPE:HTML5 question, here's what I've observed while using VS 2012 RTM:
The DOCTYPE:{value} option tells VS to examine your page and attempt to figure out from the DOCTYPE and html tags what level of validation to apply. For example, if I create a page that begins as follows:
<!DOCTYPE html>
<html>
...
then the DOCTYPE:{value} option becomes DOCTYPE: HTML5. If, however, my page starts like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
...
then it becomes DOCTYPE: XHTML5.
The options that don't have the DOCTYPE: prefix force VS to use the selected level of validation regardless of what the structure/content of your page might suggest.
XHTML 5.0, usually written XHTML5, means HTML5 in XHTML serialization. Reference: HTML vs XHTML in the W3C HTML5 draft. So it’s HTML5 written using XML-conformant markup. Yes, the name “XHTML5” is odd and confusing, but it was probably selected for its assumed coolness factor.
All HTML5 drafts require the use of DOCTYPE preamble. See e.g. The DOCTYPE in W3C HTML5 draft. It’s not really a document type declaration even formally (there is no DTD for HTML5, and my attempts at writing one suggest that it would be rather problematic). Rather, it’s just a magic string that is to be used to make browsers apply “standards mode” vs. “quirks mode”. And it does this job well.
To see the difference between “DOCTYPE:HTML5” and “HTML5”, check out their effects on the source code of the result. My bet is that the latter mean HTML5 without DOCTYPE preamble, which is illogical, as HTML5 requires the preamble. If this is the case, “HTML5” throws browsers to “quirks mode”, which is normally bad for any new page, but often necessary for old pages if one wants to avoid major rewrite.
I just completed a site: http://www.justcelebrations.co.in . I haven't launched it yet because of certain problems. The site uses css3 text gradients to style text in span and border radius to style most divs. It has to be made dynamic later so I don't want to change the text effects to images or something. The problem I am facing is that the site hangs IE8. I haven't tested it in lower versions of IE. I have tested the markup thoroughly and its validated and the css too is valid except for features which are from css3 like opacity, border-radius etc. I have also added google script to make ie behave properly and mordenizer library. The site still hangs IE8. Please Help me out here..
EDIT: after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9]
and it worked!
after a lot of testing and debugging, found out that ie<9 were crashing because of some text elements being styled by p:first-letter or h1:first-letter (which, as is the case with ie, is totally random as :first-letter is supported by IE7+ ). So all i did was separated those styles from base.css to a non-ie.css and loaded that file with a [if ! lt IE 9] and it worked!
Can you add <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> to target fixes. As you make changes view in IE8 through IE9(F12) and play with -ie-(compared to -moz- & -o-) in your css. I would also keep a CSS 2.1 file and a CSS3 file to keep track of your new code.
It's working good here in Safari. Just to narrow this down, what if you remove all the conditional and IE specific libraries you got from Google? In my experience, all the various JS libraries that are supposed to make older IE versions behave always seem to break or conflict with some other script or library like jQuery.
Also see the answer in this thread for optimizing your page loading by placing the JavaScripts at the end of the <body> section. Perhaps in your case, loading the JS last will make some kind of difference to Explorer.
I know there is the conditional comments:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9-only.css" />
<![endif]-->
to detect Internet Explorer 9, but what about Firefox 4? How do I load a style only for Firefox 4?
If you must detect the browser and version for FF4, the best answer is to use jQuery's browser() method.
However, I would agree with the comment by #Gareth McCaughan: if you find yourself having to do browser detection (for anything other than IE6/7 and possibly IE8), then it's very highly likely that you're doing something wrong. The fact that you're using it for IE9 in your question indicates that you're probably already getting it wrong.
All the modern browsers, including both IE9 and FF4 have excellent standards support, and a well-written page should render virtually identically in all of them.
If you do have something that renders differently in IE9 or Firefox 4 compared with other modern browsers, please specify what it is, because there may be a better solution than browser detection to get around it.
There is only one thing that I know of in FF4 which might need you to resort to this, and that's text-overflow:ellipsis, which is supported in all modern browsers except Firefox. See my earlier question on this topic here: text-overflow:ellipsis in Firefox 4? (and FF5)
You can't "detect" firefox in the same way. Conditional comments is IE only "feature". You have to detect it through user agent string on the backend. Or using javascript.
There are no conditional comments in FireFox to do this, if you really need to your best option would be to use jQuery (or similar) to load the relevant stylesheets.
$(document).ready(function() {
if ($.browser.mozilla && $.browser.version == '2.0') {
$('head').append($("<link>").attr({type: 'text/css', rel: 'stylesheet', href: 'css/firefox4-only.css'}));
}
});
I personally wouldn't recommend browser detection though, and you should be using web standards and feature detection if needed :)
Hi I'm trying to validate my website but it complains about my slideshow
Is this because its using html? Should I ignore it?
validator link
<embed
src="http://artygirl.co.uk/imagerotator/imagerotator.swf" width="632px" height="308px"
flashvars="file=http://artygirl.co.uk/imagerotator/rotator.xml&transition=blocks&shownavigation=false"
/>
Thanks for your help
Regards
Judi
According to the HTML spec, (rather than ) is the tag to use for embedded content. Unfortunately, Internet Explorer supports the tag, which FF, Chrome, Safari, etc support the tag.
So how do you create valid content with Flash embedded?
After a web page has loaded, you can
insert the embed tag, effectively
circumventing the XHTML problems. As a
bonus, you can use JavaScript to
determine whether the correct Flash
Plugin is available on your visitor's
computer. If it isn’t, alternative
content can be loaded.
– LongTail Video's Embedding Flash tutorial
Hopefully this answers your question about how to embed your content in a standards compliant way.
Best,
Zach
Developer, LongTail Video
I'm a bit stumped on this one. I am referring to this page - http://savitarbernese.com/welcome.aspx. At the moment it looks okay on IE7 but I can't seem to get it to work on other browsers. As it stands now I had to wrap a couple of DIVs within tables to make the background extend behind the full content. I'm guessing this has something to do with the div overflow? I'm not sure...
What's the best practice for cross-browser compatibility when using DIVs?
Cheers,
D.
Add
overflow: hidden;
to #container and to #content in your css and presto!
This directive tells the browser to extend the height of the parent divs to the inside divs, even when they are floating.
What's the best practice for
cross-browser compatibility when using
DIVs?
Allways code for firefox first, then for IE.
You are starting in the wrong end. If you build it for IE7, it will rarely look the same in any other browser, and not in IE8 either.
First make sure that it looks right in a standards compliant browser, for example Firefox, then it will almost always look the same in all other standard compliant browsers, which is just about everything except IE7 and earlier. IE8 still has some rendering problems, but it's a lot closer to being compliant than IE7. You will have to make some tweaks to the page to make it look the same in IE7 also, but that is a lot less than trying to make it work the other way around.
And first of all you should make sure that you have a proper doctype on your page so that it doesn't render in quirks mode. That helps a lot when you want it to render the same across browsers.
Thanks - that's a fair comment. My dev machine is down and I only had access to IE7 at the time. Normally I would definitely start off with Firefox 3.5 and go from there.
That aside, it's a small problem that is hampering me at the moment. In FF3.5, Safari, and IE8 the background of the content panel does not extend down the full height of the content like it does in IE7. I have changed the doctype to use XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Is there something obvious I have missed here?
Thanks again.