I'd like to style some SVG sprites using an external stylesheet, as detailed in this Sitepoint tutorial and W3C's Styling with SVG.
However, the CSS isn't very, er, standard:
rect {
fill: red;
stroke: blue;
stroke-width: 3
}
as it doesn't validate with the W3C CSS Validator.
What gives?
To validate SVG using the W3C CSS Validator, under "More Options" change the profile to SVG
Is CSS for SVG “standard” CSS?
No, it is not. It makes use of the CSS language, but it is not in the CSS property specification. It's only part of the SVG specification. It's quite similar to using non-standard vendor extensions, in that while prefixes are defined in the CSS grammar, prefixed properties don't actually validate as CSS solely because they're non-standard.
You're supposed to choose the SVG validation profile when validating your code, but it doesn't appear to work; it spits just as many errors as validating according to the CSS spec would. In that case, then it's probably a validator bug.
Some properties are standard CSS e.g. display, and some aren't; they apply only to SVG content e.g. fill. They're all listed here.
I don't think there's an easy to digest list of which is which but if you click on an individual property such as display in the SVG specification property list (display happens to be a standard CSS property) then you get this text in the SVG standard at the end of the definition:
Except for any additional information provided in this specification, the normative definition of the ‘display’ property is the CSS2 definition ([CSS2], section 9.2.6).
Related
I have used
html, body {
background-image: something;
}
in my CSS for many years. Now I can't remember why really..
Is that method even necessary/beneficial or is body {} enough?
If you're applying a background, selecting body is usually enough; the browser will know to paint the background over the entire viewport regardless of the body dimensions. The details of how a browser is expected to behave are covered in the spec (CSS2.1, CSS3 module). Even the CSS2.1 spec recommends it (although it doesn't mandate it for reasons mentioned later in the prose):
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element.
The only situation in which you would apply a background to both elements is when you want to layer one background over a different one; you could either use the CSS3 syntax of layered backgrounds on just the body element, or have body's background overlay that of html. Even then, the only reason I can think of for choosing the latter is if you need compatibility with older browsers that don't support the CSS3 syntax. I cover both methods in-depth in my answer to this related question.
I just wonder why should I use "class=" identificator instead of my own "tag"()?
Class example
<span class="red"> Hello there! (using class)</span>
.red {color: red;}
Tag example
<div id="reddiv">
<red>Hello, there (using own tag)</red>
</div>
#reddiv red {color: red;}
Its much more easier for me to use my own tags, since its faster to write.
Can you please tell me if doing it in first/second way has any negative/possitive sides?
While this may work in most browsers, your HTML then loses context. When an application like a search engine (or screen readers or anything else that looks at the source) parses your document, what is it to make of a tag named 'red' or 'purple' or 'job'? It won't have context, so you'll lose out. HTML uses a set of predefined tags that have meaning, you can venture out of it but you'll lose the advantage of everyone instantly understanding (all or part) of your document.
If this document is part of a data transfer framework and not on the public web, you should look at XML.
There are many advantages of using class.
First of all, with class, we use css styles which gives a lot more configuration options than simple HTML tags.
We give all the styles and formatting at one olace and just call the class everywhere we want to apply those, which in big projects like ERP, makes a big difference in code size.
The css style is more compatible with latest versions of browsers and a lot of old HTML formatting and style tags are deprecated in latest versions of HTML.
HTML tags behave differently under different browsers and different document modes. Where css will give same result everywhere.
The css classes can be applied to all the relevant tags on page at once just by defining it somewhere at the top of page.
You should also not forget that predefined tags have a lot of default properties and your custom tags none. So you would need to define everthing over again for all elements apart from span.
Also, you can have more than one class on an element, so <span class="red bold">Red</span> is possible.
You can remove, change and swap between classes to change dynamical the element style or behavior, what you can't do with tags.
Tag is element that needs class to set it behavior and style.
Custom elements are created using document.registerElement():
var reds = document.registerElement('red');
document.body.appendChild(new reds());
I want to know what things can be done "ONLY" with CSS , that are not available using dynamically updated style "attributes" using Javascript. So far I know:
Media queries
Pseudo tags
Any more?
Update:
This question was closed but I asked it as I am trying to decide on the technology to use for a project, but one of the options cannot use CSS style sheets, and can only manipulate the style attribute using javascript.
Inline style attributes can only contain property declarations (e.g. width: 10px or color: red). They can't contain any other CSS constructs: not selectors, at-rules (e.g. #import, #media, #font-face), etc. Just property declarations.
However, they play a big role in the cascade: any styles for an element with that attribute take highest precedence (after considering !important of course).
There's actually an entire module devoted to style attributes, by the way, but it's not essential reading for authors.
So, anything that isn't a CSS declaration, is only possible in a stylesheet, not a style attribute. Not sure if that's what you're asking...
Note that media queries and #media rules are not the same thing; media queries can exist in areas outside of stylesheets too, like HTML's media attribute, where they're next most commonly found.
I believe pseudo classes (:hover etc..) and pseudo elements (:after, :before) cannot be added/manipulated via JS (via the style property i mean) because they are not part of the DOM.
Recently I found these strange HTML attributes in the wild:
<div shadowblur="1" shadowcolor="black" shadowopacity="0.5">
Any idea what browser this affects? Is it a good idea to use?
It looks like it affects the <canvas> tag:
HTML5 Canvas, shadowColor & shadowBlur
http://www.williammalone.com/articles/html5-canvas-example/
EDIT:
It definitely is for canvas in the form of context.shadowBlur
Most likely working through css
This will help you to understand.
CSS Attribute Selector: Apply class if custom attribute has value? Also, will it work in IE7+?
As far as I'm aware those are not valid attributes. My guess is that they are used in a script to apply some effect. For example, a jQuery script could very easily iterate over all div elements and apply a set of CSS styles accordingly.
While that can work, a better idea would be to use HTML5 data-* attributes, otherwise your markup will not validate.
1) If inside CSS file we specify the following style:
td
{ text-align:center; }
While in a Html file we have
<td align=”right” … >
then value set in CSS file will take precedence over an inline html attribute and thus elements contained inside <td> cell will be aligned to the center.
a) Is same true for all html attributes? Meaning if a CSS rule and an html attribute functionalities overlap , will the CSS rule always take precedence?
BTW – I know we should usually prefer using CSS rules vs html attributes
thanx
Which set of definitions, HTML attributes or CSS properties, take precedence?
The textbook answer:
CSS properties take precedence over HTML attributes. If both are specified, HTML attributes will be displayed in browsers without CSS support but won't have any effect in browsers with CSS support.
(Reference: http://www.hwg.org/resources/faqs/cssFAQ.html)
The real-world answer:
It depends, if you want to be certain for a specific attribute or set of attributes, you will have to create a unit test and apply those tests to the specific browser(s) that you want to verify for compliance with the "textbook" answer, or compliance to your specification for the specific project you are working on.
You already imply that you know certain HTML attributes are deprecated, so I will not belabor that point here.