I've found such code in html5boilerplate:
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
What address? What does it affect? Elements with attribute hidden like following example?
<div hidden></div>
Yes, exactly like your example. The selector will match any element with a hidden attribute (there's an implied universal selector before the attribute selector).
The hidden attribute is a new addition to the HTML specification, and is therefore not supported in older browsers. By adding that rule to your stylesheet, you effectively polyfill the native behaviour of that attribute (which is, fairly obviously, to hide the element, similar to setting display: none).
The "known issue" in IE6 is caused by the fact that it doesn't support attribute selectors.
hidden is an attribute in HTML5
Read Detailed description here.
Also read a good explanation here
The comment would seem to suggest that that CSS solution is to address those browsers which are not compatible with the new hidden behavior by default
You can also create your own attributes using the prefix "data-". For example Jquery Mobile uses it.
Example :
Your HTML
<div data-role="header" data-position="top">
// content here
</div>
Your CSS
[data-role=header]
{
font-family:arial;
font-size:20px;
}
[data-position=top]
{
top:5px;
}
A good explanation is available here.
The W3C documentation
Related
I was refactoring some code and decided to change the usual style="display:none" to use the HTML5 hidden attribute, in order to hide a button. Only to find that it is not compatible with bootstrap's btn class. That said, I will keep using the style display attribute but I wonder if this is a bug that should be reported or simply a feature that everyone should be aware of.
The corresponding jsfiddle can be found here
The HTML5 specification already warns developers about this:
Note: Because this attribute is typically implemented using CSS, it's also possible to override it using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the effects of the hidden attribute. Authors therefore have to take care when writing their style sheets to make sure that the attribute is still styled as expected.
— The HTML5 Specification - 7.1 The hidden attribute
The problem you're having is that Bootstrap's .btn selector specifically defines display: inline-block, which overrides the hidden attribute's display: none.
This means that specificity is going to be an issue. This is a rare case of where !important may be desirable. I'd personally implement the following style rule:
[hidden] {
display: none !important;
}
This ensures that all elements with a hidden attribute will be set to not display, regardless of specificity. This is doubly good in that this will make the hidden attribute effective on any browser which supports the [att] selector notation (which is any browser which supports CSS2).
Working JSFiddle demo.
Try adding this to your css:
*[hidden] { display: none !important; }
for example; https://fiddle.jshell.net/bh8h5tya/
It's not hidden because bootstrap applies display: inline-block on the class .btn
Bootstrap provides the following .hidden class that you can use to show/hide elements. Try using that.
.hidden {
display: none !important;
}
I mean to change my cursor pointer to a custom cursor.
I saw this topic but it wasn't of any help: "html, css - cursor - how to change default image for pointer".
Is there any way I can use CSS to resolve this issue, b/c I'm not allowed to use JavaScript on someone else's website where I am configuring my profile on. I can only use CSS Markup and HTML Markup.
There can't be a way to use JS in the CSS Markup, right?
You can use this:
.custom {
cursor: url(images/my-cursor.png), auto;
}
But I wouldn't recommend it due to browser incompatibilities. Credit to Chris Coyier / CSS-Tricks
http://css-tricks.com/almanac/properties/c/cursor/
You can use this solution cross-browser which is suitable for Webkit(Chrome, Safari, etc), Gecko (Mozilla, etc) and IE8+ as well:
a.heroshot img {
cursor:url(http://alienbill.com/kirkdev/magnify.cur), pointer;
cursor:url(http://alienbill.com/kirkdev/magnify.cur), -moz-zoom-in;
}
Check this demo:
http://jsfiddle.net/a_incarnati/cbz9xkjv/
You should opt for using .cur files instead of images for replacing the cursor via CSS because .cur files are supported even from IE6. On the contrary if you use images you will have cross-browser issues.
Is it possible to use attribute selectors to partially-search an inline style attribute?
Can anyone find a way to get this bit of code working?
http://jsfiddle.net/v4xPY/1/
It seems that it's not possible to do this .hidden[style*="display: block"] + .below, nor even just [style]
The attribute selector you're trying to use isn't legit CSS, though it is a jQuery attribute selector. As far as I know, CSS is limited to [attribute=value], [attribute~=value] and [attribute|=value]. (derp, see below)
But, since you're already using jQuery to toggle the hidden div, it'd be a lot simpler to just toggle a class on the below div at the same time, rather than wrestling with the attribute selector (unless there's more to it than that).
Modified jQuery:
$(function() {
$('html').click(function() {
$('.hidden').slideToggle();
$('.below').toggleClass('yellow');
});
});
and CSS:
/* Margin of Below should reduce when hidden is opened */
.yellow {
margin-top: 10px;
background: yellow;
}
Fiddle here.
Edit: Okay, I was way off on the bit about the attribute selectors, it is legit CSS3; I don't know the details on browser support, though I'd guess it'd be supported in all the usual "modern" browsers. Also, there's apparently a problem with IE7 targeting the style attribute specifically. There's a pretty good write-up at http://www.impressivewebs.com/attribute-selectors/.
Once more: Though I can't find anything that explicitly confirms this, it looks like the attribute selectors only apply to attributes that are actually hardcoded into the html; basically it's just parsing strings, not examining the dom elements' "states" as such?
I have this code
*html #alertBox {
height:100px;
}
#modalContainer > #alertBox {
position:fixed;
}
is this supported by css, i found this code in some other site(I forgot the link)
*html #alertBox {
height:100px;
}
That's a mistyped star-HTML. Star-HTML is a CSS hack usually used to target rules at IE6.
The star-HTML prefix in a rule shouldn't match anything, because there is no element (*) above the root element (html). But it does in IE up to version 6 due to bugs in that browser.
However for this to be a valid rule, there must be a space between the * and the html. The current code is invalid CSS: the validator will complain and browsers might do unexpected things with it. As it happens, in the current crop of browsers there is no difference: IE6-7 allows the spaceless syntax, the others ignore the whole rule. But you shouldn't really rely on that.
#modalContainer > #alertBox {
position:fixed;
}
That's a child selector: it selects the alertBox when it's a direct child of modalContainer.
> is something IE6 doesn't understand at all, so the consequence is to target the rule at all browsers except IE6 (which doesn't support position: fixed). This makes it more-or-less the opposite of the star-HTML hack. Clearly it is being used for the purpose here, as otherwise the selector, including two unique IDs, is quite redundant.
This is known as the star HTML hack and is useful in helping you pass certain CSS rules to older versions of Internet Explorer.
So the first example will only set the height of #alertBox to 100 pixels if the browser that is used is susceptible to the star HTML hack:
The second example (#modalContainer > #alertBox) will be applied to any element with an ID of alertBox which is also a direct child of another element that has an ID of modalContainer.
The markup would have to look something like this:
<div id="modalContainer">
<div id="alertBox"></div>
</div>
and not this:
<div id="modalContainer">
<div>
<div id="alertBox"></div>
</div>
</div>
Both of these rules are valid CSS.
I was looking at a css file today and found the following rule set:
div.with-some-class {
display:block;
margin:0;
padding:2px 0 0 0;
*padding:1px 0 0 0;
font-size:11px;
font-weight:normal;
*line-height:13px;
color:#3D9AD0;
}
What does the star mean in *padding and *line-height?
Thanks.
This is the "star property hack" along the same lines as the "underscore hack." It includes junk before the property that IE ignores (the * works up to IE 7, the _ up to IE 6).
In CSS? Nothing; it is an error.
Due to bugs in some versions of Internet Explorer, they won't correctly ignore the invalid property name, so this is one way of providing CSS that is specific to those browsers.
Using conditional comments is clearer and safer though.
The asteriks character is a valid wildcard in CSS. Use of it alone means the following CSS properties will be used against all element nodes in the DOM. Example:
*{color:#000;}
The above property will be applied to all DOM elements, thereby defeating the natural cascading in CSS. It can only be overridden by specifically tageting DOM elements where that targeting begins a unique identifier reference. Example:
#uniqueValue div strong{color:#f00;}
The above property will override the wildcard and make the text of all strong elements that occur in a div inside an element with an id attribute value of "uniqueValue".
Using a universally applied wildcard, such as the first example, can be a quick and dirty method for writing a reset stylesheet. It is quick and dirty because granular definition of presentation after the wildcard will likely create an extremely bloated stylesheet. If you are going to use the wildcard I would suggest using it more specifically, such as:
* strong{color:#f00;}
The above example will make the text of all strong elements color red regardless of other CSS properties not specified with a unique identifier. This is considered much safer than using the "!important" declaration as that declaration is known to cause interference with natural functionality of the intended behaviors and is a maintanence nightmare.
The asteriks in your example are in the wrong place as they seem to occur inside the property declarations, the code that goes inside curly braces, and that will likely cause an error.
This is a hack for IE7.
If you write this:
.test {
z-index: 1;
*z-index: 2;
}
on all navigator which respect the W3C Standard <div class="test"></div> HTMLElement have a z-index: 1 but for IE7, this element have a z-index: 2.
This is not standard.
To achieve same thing with W3C Standard, follow this steps:
Add some Internet Explorer Conditional Comment (this is a simple HTML Comment for all other navigateur so, it's a standard way).
<!--[if IE 7]><html lang="fr" class="ie7"><![endif]-->
<!--[if gt IE 7]><!--><html lang="fr"><!--<![endif]-->
And use the previous rules like this:
.test {
z-index: 1;
}
.ie7 .test {
z-index: 2;
}