HTML Shadow Attributes? - html

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.

Related

Why to use "class=" when I can use my own tag?

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());

Angular and IE8 -- HTML5 elements not styled inside ng-view

So I am trying to get angular working on IE8. I have followed all the steps on http://docs.angularjs.org/guide/ie and it seems to be working -- I see the content of ng-view rendered on IE8 when I switch between views.
The problem is that I don't actually see any content in the inspector:
.. it's just an empty ng-view tag. I can see all of the content on the page, but no styling is applied to anything inside ng-view.
I am not sure whether this is an angular or HTML5 issue. I have added the html5shiv and HTML5 elements outside of ng-view are styled nicely.
EDIT
I have determined that the problem is HTML5 elements. <section> and <article> are not styled inside ng-view, while simple divs receive all the specified styling. Outside of ng-view, <nav> and <header> are styled just fine.
I was able to fix this by conditionally including jQuery in IE8 based on answer given here https://stackoverflow.com/a/18317832/2026098
The problem here is that, even if you add a namespace and/or precreate your elements according to the IE guide there are certain parts of the angular core that don't pass through the normal jQuery element creation - I have had the issue persist even when using full jQuery instead of Angular's jQLite but I've heard that fixes things for most people. Using an HTML5 shim doesn't solve the issue on its own either.
But even so, I would prefer to not have to substitute jQuery if possible, in which case you'll need to also do the following to get a fully working solution:
Add reset styles for the block-level HTML5 elements so they display: block; correctly
Target the HTML5 elements with a colon prefix as well in your CSS. You need to escape these, it will look like this: header, \3A header { /*...*/ }. Note that there is a space between the escape sequence and the rest of the selector.
If you are using jQuery, you will need to use a 1.10.x version or conditional tags to switch to it in IE8.

Is good practice to apply a style to the html tag?

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.

scoped style equivalent in html4

I have a piece of HTML that I need to modify and I need to keep the changes minimal (out of CSS). All I need to do is to hide a table cell until something happens. So I went ahead and added the style tag as shown below:
<td style="display:none;">
However, this causes the style class to reset, e.g. the cell which used to be vertically center-aligned is now top-aligned, and so on. My understanding is that this is because the style attribute overrides the default CSS stuff. Is that correct? If yes, how can I prevent it? I just need to add the display attribute, not reset the rest of style attributes.
I spend some time searching online and noticed that HTML5 has introduced something called scoped style. Is there an HTML4 easy-to-do equivalent for it?
It might be because doing display:none remove the node from the DOM display calculation. You no longer have a placeholder for that cell in your table. You might try visibility:hidden, which will have the DOM element keep its place in the document rendering but just not be visible.
Try visibility:hidden; instead of display:none;
Let me know if that does the trick.

A common class for multiple html tags using css

I have a specific css class "styled" which gives glass effect to the various divisions. The site is at http://www.rohanjain.in/. I have various html5 tags which use the glass effect from the css class defined.
Is there any way to define in the .css so that my header, footer, article tags use the class "glass" automatically, i.e. they inherit from this class. I am trying to do to decrease the size of css and html. Right now these tags are provided attribute class="stlyed" from html. But is there any way to do this only using css.
I really don't want to do something like this:
article, footer, header{
...css definations...
}
I want to use browser detection and define class glass in some other .css according to the features supported while keeping the size minimal.
Update 1:
This is the source of css http://www.rohanjain.in/media/css/style.src.css. The size of styled class is high because of multibrowser effect definations.
Update 2:
It seems there is no simple way to achieve inheritance of classes, so I am finally using class="stlyed" in the html elements to achive this.
Think about this from a CSS perspective. How is your CSS meant to know that you have some tags which are in some way special if you're not prepared to tell the CSS about them explicitly and you're not going to classify your markup implicitly?
The best solution I believe is to classify your markup (but not using something as unsemantic as "glass") but the explicit element based CSS is perfectly acceptable.
There is a tool called LESS that will do exactly that:
Can a CSS class inherit one or more other classes?
No, you either have to define them together:
article, footer, header, .glass {
...
}
so that those tags have the same styles as the "glass" class, or you have to use JavaScript to dynamically add the "glass" class to those elements.
If I understand you correctly, the way that you show
article, footer, header{
...css definations...
}
really is the only, and most correct, way to do this. I don't understand why you don't want to use it, or what other kind of definition you are looking for?