Is it possible to use the noscript element in CSS selectors?
noscript p {
font-weight: bold;
}
Yes! You can definitely do that.
In fact, many (all?) browsers support targeting any arbitrary tag using CSS. "Official" tags in the HTML spec only define what a browser should do with them. But CSS is a language that targets any flavor of XML, so you can say foo {font-weight:bold;} and in most browsers, <foo> hello world </foo> will come out bold.
As Darko Z clarifies, IE6/7 do not add arbitrary (non-standard) elements to the DOM automatically from the source; they have to be programmatically added.
I have an IE bug to keep in mind. If, like OP, you just want to style text within the noscript tag and not the noscript tag itself, please disregard this..
Say you want to make the noscript tag's background red. In IE8, it will show up with JS enabled. Just the box itself, not the text inside.
So this combination isn't good:
CSS
noscript {
background-color: red;
}
HTML
<noscript>Turn on your damned JavaScript! What is this, 1999?</noscript>
But this workaround works fine:
CSS
noscript div {
background-color: red;
}
HTML
<noscript><div>Turn on your damned JavaScript! What is this, 1999?</div></noscript>
Weirdly, I only see this behavior in IE8, not IE7. And who knows about 6..
In addition to Rex M's answer - IE 6/7 (6 def, 7 maybe?) will not style an arbitrary tag for you. But lucky for you as with all many IE problems there's a workaround.
Say you want to style an element called foo. To get IE to recognise it as a styleable element you need to include this line somewhere in your JS:
document.createElement('foo');
You don't need to append it, just create it.
This will kick IE into styling that element for you with the CSS rule:
foo { font-weight:bold; }
Related
I have a question regarding html color code.
<font color=rgb(255,0,0)> This is my font </font>
not showing red color fonts in firefox though the color code is fine. Any idea? Instead it is showing some weird green gray color!
Thanks
Try with "style".
<font style="color: rgb(255,0,0)"> This is my font </font>
The syntax rgb(255,0,0) is not HTML and you are encountering error recovery. It is defined in the CSS colors spec. You can only use it in CSS.
Aside from that, the color attribute and the rest of the <font> element have been removed from HTML.
Use a stylesheet and a semantically appropriate element.
p {
color: rgb(255, 0, 0);
}
<p>This is my font</p>
I think something has to be added to this. You shouldn't use the HTML <font> tag. It's deprecated, it's not supported by HTML5 and it has a weird behavior such as the one already displayed when you tried to go rgb(255,0,0) and the browser painted your font dark green.
Go with any of the text tags such as <span>, or <p> or whatever. And for the color, use the style attribute:
<span style="color:rgb(255,0,0);">This is my font</span>
Docs regarding <font> http://www.w3schools.com/html/html_styles.asp
The color attribute only supports named and hexadecimal colors. To achieve the same affect using semantic HTML you can use the ID attribute on a span element and then use CSS to style it:
#warning {
color: rgb(255, 0, 0);
}
<span id="warning">This is my font</span>
The reason it is displayed as the weird color is because of the same reason "chucknorris" produces a red-brownish color.
The <font> tag is obsolete, and the color attribute may not work completely in most recent browsers as it's deprecated, although it still works when using the hex color codes and the name of the color.
HTML should be used for describing the structure of web pages.
For styling your web page, you should use CSS. In your case, you could do something like:
<span style="color: rgb(255,0,0)">Hello World</span>
From W3C:
The <font> element is a non-standard element.
HTML5 classifies it as a non-conforming feature.
From MDN:
Do not use this element! Though once normalized in HTML 3.2, it was
deprecated in HTML 4.01, at the same time as all elements related to
styling only, then obsoleted in HTML5.
Starting with HTML 4, HTML does not convey styling information anymore
(outside the <style> element or the style attribute of each element).
For any new web development, styling should be written using CSS only.
The former behavior of the <font> element can be achieved, and even
better controlled using the CSS Fonts CSS properties.
Sources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
https://www.w3.org/wiki/HTML/Elements/font
https://www.w3.org/TR/html5/obsolete.html#non-conforming-features
https://www.w3.org/standards/webdesign/htmlcss
Here is my code:
.blue {
color:#6E99E1;
font-size:9px;
}
<span class="blue">::CLICK HERE:: to view our New Equipment inventory. <br /><br /></span>
I've somehow triggered something that prevented the <a> tag from inheriting color of parent <span>.
Just an addendum to the other responses, if you want your <a> tags to inherit the colour from their parent you can use
a {color: inherit; }
By default an anchor tag does not inherit attributes like color if an href attribute is present.
Check out the difference between these two on a page:
<span style=color:green>test</span>
<span style=color:green><a>test</a></span>
The following link is to the w3 c:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in
such a way as to make them obvious to
users (underlining, reverse video,
etc.). The exact rendering depends on
the user agent. Rendering may vary
according to whether the user has
already visited the link or not.
.....
Usually, the contents of A are not
rendered in any special way when A
defines an anchor only.
This is an answer to the question as well as a reply to Kevin's answer and its comments.
Anchor tags do inherit color, linked or not. The only reason they don't in practice is because they already have their color set in the browser's default stylesheet. The same can be said for the underlining of the link (which, I presume, you didn't notice, because you actually want it or had already changed it yourself).
In Firefox, you can see this in Firebug if you toggle "Show User Agent CSS" (or you can have a look at Firefox's internal stylesheets directly. You can see the browser's defaults in Webkit's Web Inspector and Opera's Dragonfly as well. I don't think you can in IE.
I don't know of any site which has an overview of all browser's defaults. CSS2's "informative" HTML4 stylesheet as well as the YUI reset stylesheet would be a good starting point, but neither of them mention any (link) colors (the HTML4 stylesheet does mention the underline).
To find out which properties are inherited in general, you can use the CSS2 reference property index table (see the "Inherited?" column). SitePoint also mentions it in its CSS reference.
So if you want to make sure your link inherits its color from its parent instead of from the browser's default stylesheet, you would ideally do something like this:
.blue a:link {
color: inherit;
}
You could set it for the different pseudo-classes separately (so :visited, :hover and :active as well), or for the a tag altogether.
However, IE6 and IE7 don't support the inherit keyword, so if you want to support them too, you'd have to set the color explicitly.
I think a doesn't inherit color by default. (certainly it has always worked that way on my sites). Why not change
.blue {
color:#6E99E1;
font-size:9px;
}
to
.blue, .blue a{
color:#6E99E1;
font-size:9px;
}
Firebug will show you exactly which style rules are applied to which elements. It's perfect for this.
(A non-CSS possibility: Do you have link/alink/vlink attributes on your <body> tag?)
Edit: Duh, silly me, the others have it right - <a href> doesn't inherit colour. But Firebug is still a good tool for this kind of problem (even if I'm not. 8-)
In addition to firebug (which should be your first port of call), the IE developer toolbar will also tell you where a given style is sourced from, just in case IE - shock, horror - should be different.
You need to explicitly set the color of the links to override the default blue color.
You are likely seeing the a:visited colouring. Try this:
.blue, .blue:link, .blue:visited {
color:#6E99E1;
font-size:9px;
}
I plan on using some of the new HTML5 semantic elements, but it looks like some of them aren't well supported even on newer browsers (main isn't supported in IE11 as far as I can tell) is there a way to have them be treated as a <div> if they aren't supported, as the HTML5 semantic tags I plan on using are currently basically the same as divs AFAIK (header, footer, main are the ones I currently plan on using, also canvas but there isn't a good alternative tag to do what canvas does).
Currently if I use one of the unsupported tags in IE it seems to be treated as an unstyled tag but the issue is I can't set the width or height of it in css. What can I do for it to be treated as a and apply all styles that I put in css to that element using the name of the tag as the selector as though it were a <div>.
main
{
width: 100px;
}
does not work in IE11, if it was IE7 or something I wouldn't be too worried but quite a lot of people still use more updated versions of IE and I don't want the website to display improperly to them.
You need the HTML5 shim for supporting older browsers but using just the HTML5 shim does not fix IE11 see: http://jsfiddle.net/jbowyers/n3qZp/. So you also need a CSS reset that includes the 'main' element such as normalize. Or you can just add the CSS reset directly to your project as mentioned by others
main { display: block;}
The html5shiv will allow you to style the main element in IE 11 (and less). There's an explanation of what it does (actually a breakdown of its entire history) here.
Money quote:
Btw, if you want CSS rules to apply to unknown elements in IE, you
just have to do document.createElement(elementName). This somehow lets
the CSS engine know that elements with that name exist
NB. You should probably be using the shiv as a matter of course if you're using HTML5 and plan to support anything less than IE 9.
I think I have found a solution.
In my css file if I do:
main /*or any other unsupported tag that you want treated as a div*/
{
display:block;
other-property:other-value;
other-property:other-value;
...
}
It seems to act identical to a <div> tag. I haven't thoroughly tested or researched this solution (tested several attributes including color, width and text-decoration on IE11 and google chrome with tag named <asdasd> and it worked exactly like a <div>) so if anyone knows any problems with it please let me know.
I’m not sure what the question really is, but the title “Use <div> as backup tag for HTML5 semantic elements” is a good answer to the question “How can I use the HTML5 main, header etc. tags to that my page also works on browsers that do not support them?”
For example, instead of having just <main>...</main> in HTML and main { ... } in CSS, you would have
<div class=main>
<main>...</main>
</div>
in HTML and
.main { ... }
in CSS.
This may look redundant, and you get almost the same browser coverage by using polyfill like html5shiv and explicitly declaring main { display: block } if the polyfill doesn’t do that. But in this approach, you do all the styling in an old robust way and use the new elements only for their semantics. (In reality, the “semantics” means nothing, but maybe some day some programs will recognize main, article etc. and deal with them in some special way.)
I need to put an image background for the whole page. I use to do this applying the style to the body tag.
Just wondering if ss good practice to put a style to the html tag
Yea nothing wrong with it.You can put style to html tag.
Reference: http://www.w3schools.com/TAGS/tag_style.asp
http://www.w3.org/TR/REC-html40/present/styles.html#edef-STYLE
Sure. Actually, the html tag can be omitted in html5, so if you have it, you can sure use it for styling if you will. It has hardly any other purpose, so if it saves you from having to add an extra div, I think you should.
I normally add the height-property to the HTML-element, in order to make the background-image as large as possible. Don't forget to set the body's height aswell:
html {
height:100%;
}
body {
height:100%;
background:#000 url(your-image.png);
}
Yes, you can apply style to the HTML element. What's more, it doesn't even have to exist in your original HTML document (as is allowed in HTML5), e.g. this code below is fine:
<!DOCTYPE html>
<title></title>
<style>
html {
/* ... CSS properties go here ... */
}
</style>
The technical reason for this is because the <HTML> element is defined in the W3C specs as an implied element - basically user-agents must assume it is there, and all good UAs will append it to the DOM when rendering the web page.
Abu's answer, with respect, although in the context he is talking about is correct, is a misunderstanding of the question. Abu is referring to applying an inline STYLE attribute to the HTML element within the HTML document itself. I believe this question, on the other hand, is referring to using the html {} selector in an external CSS style sheet.
No its not recommended to use style tags inside HTML as styling should be taken care by CSS.
You shouls avoid it unless there requires a specific scenario where you want to dynamically set the style for some part.
But in that dynamic case also, I would recommend to create a class level style inside a CSS and then just add that class to the element while creation so that the required styles are applied.
Can it be used inside an a tag?
a.x:first-letter
{
color:red;
}
My name is <a class=x>Lionel</a>
I can't seem to make it work.
According to css2.1 :first-letter applies only to block container elements.
Yes, that should work fine.
Can you provide a JSFiddle example of it not working?
It certainly should work -- See here for a test page which demonstrates it in action, and here for a browser compatibility chart (it says it should work in any browser).
[EDIT]
As #SilentGhost says, it only works for block level elements, which <p> is and <a> isn't.
You can make inline elements like <a> act as block elements by using the display:block; style. However this can mess up your page layout.
Fortunately, there is a half-way house option: display:inline-block; which should make your element get treated as a block element without disrupting your page layout. Try adding that to your stylesheet as follows:
a.x {
display:block;
}
Your :first-letter style should now work.