I've been working with Modernizr and it is a wonderful resource, just a great project. However, the way I've been using it is:
Design with baseline (IE) CSS
Enhance with CSS3 effects for advanced browsers
Unless I was going to completely replace the styles based on behavior, why shouldn't I just add styles such as box shadows, gradients and border radii to the stylesheet? If the browser doesn't understand a rule, it will just ignore it, correct? And if JavaScript is off, I can't use it anyway.
Should I be using the above method in the typical case, and Modernizr for advanced cases? Or is there something wrong with relying on browsers to ignore what they don't understand?
You're totally right that older browsers completely disregard much of what's in CSS3.
Because of that, I do my css3 in my basic selectors.. but often make use of the modernizr's no-feature classes to handle the older browser case:
div.box {
height:50px;
-moz-box-shadow: 3px 3px 5px #555;
-webkit-box-shadow: 3px 3px 5px #555; }
div.box span.fakeshadow {
display:none;
}
.no-boxshadow div.box span.fakeshadow {
display:block; background: url('fakeshadowbg.png');
}
I hope that makes it more clear.
You can use (html 5) elements that some browsers do not support yet. Also you can specify fallback styling.
A lot of browsers create their own CSS rules for things like text-transform. With Modernizr you can write one rule and Modernizr makes it happen for multiple browsers.
I think it's just convenience.
Related
The website Qq.com has a rule-set with two padding declarations which seem a bit strange. My question is, what does the 11px\0 part do? Does this have something to do with overriding the first padding declaration? I understand the use of the slash in situations like these: / (forward slash) in css style declarations, but I have never seen something like this.
.suggestion .s_title {
padding: 3px 0 1px 11px;
padding: 4px 0 1px 11px\0;
color: #a0a3a8;
font-size: 12px;
line-height: 18px;
}
"Backslash zero" is a css hack targeting IE8 for the current rule. This can be a terrible thing to do, unless there is no other choices. What happens is that IE8 will erroneously believe that this is a valid rule to be applied while other browsers won't, leaving you with a chaos rule:
.my-dirty-rule-for-ie-8-only { margin-bottom: 5px\0; }
For this ruleset, that means the second padding will take effect by overriding the first one only if the user displays your page with IE8.
From a developper point of view, css hacks should be avoided at all cost. You seriously never want to deal with rules targeting a specific browser, as it will haunt you forever from the moment you fall for it.
As Harry pointed out, it was a IE specific hack. You use the \0 part to specify the declaration for a specific IE version. More information about it here:
http://codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10/
And here
http://mynthon.net/howto/-/webdev/CSS-big-list-of-css-hacks.txt
(See: 24. IE9 hack)
border-radius is a CSS3 property and it is used to make rounded corners. I wanted to make corners of one of my images rounded.
So I styled my image using CSS as below
#Images{
margin-top:20%;
margin-left:20%;
border:2px solid #BC8F8F;
padding:2px;
border-radius:40px;
}
I got the result as expected (with rounded corners) when this is run in firefox 26.0, chrome 32.0.1700.102 and IE 9.0.
But I found the below styling in a blog which defines border radius separately for firefox and webkit (I guess webkit is chrome and safari, correct me if I am wrong)
div{
background-image: url(beach.jpg);
width: 375px;
height: 500px;
border: 8px solid #666;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}
Why should we define border-radius for each and every browser when we get the result without doing it?
TL;DR: You shouldn't.
Vendor prefixed properties (-something-) are experimental implementations. They are not standard CSS (although the naming convention is blessed by the CSS specification to avoid conflicts with other experiments).
They are used before a property becomes standard so that authors can try it out and provide feedback to help develop the specification (and find bugs in the particular browser's implementation).
border-radius has been supported through a standard property for a long time. There is no reason to use experimental vendor prefixed versions of the property as it is no longer experimental.
The CSS 2.1 specification says:
Authors should avoid vendor-specific extensions
… since experimental implementations are designed for experimenting with, not use in general websites. They might do different things in different versions of a browser as the specification is developed and they should become unsupported in the future as the standard versions take over.
According to http://caniuse.com/border-radius, you don't have to use prefixes.
When I use the text shadow css, mozilla and chrome are showing different smudging levels.
#dfg{
color: #fff;
text-shadow: 0px 0px 2px white;
}
In mozilla I'm getting a more smudged look which i don't want. I've tried
-moz-text-shadow : 0px 0px 1px white;
but it doesn't help. Is there a method in css to give browser specific text shadow values or should i go for a javascript to identify the browser and then select a shadow level.? Please help.
chrome version
mozilla version
Personally I think a Javascript based method would work best, all modren browsers support the standard CSS shadow function, I think you were thinking of -moz-window-shadow which is a OSX feature.
also look into the blur property of text-shadow, perhaps explicitly defining it?
I need to display a custom scrollbar. I would like to avoid using a jQuery plugin if possible. So can I so something like this with HTML5 & CSS3 ? :
.myScrollableBox {
width: 200px;
height: 500px;
/* Display scrollbar if content is bigger than the box */
overflow: auto;
/* This doesn't work, but can I do something similar? */
scrollbar-image: url(/images/myscrollbar.png);
}
It's actually possible, if browser does support styling of toolbar elements (= is based on WebKit). Although it's not mentioned in many tutorials (such as this brilliant one, for example), you can just use background-url property to use custom image instead of color.
For example, in this page I've changed (in Chrome Developer Tools) styling to...
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
... and voila, I have some cyanid scroller. )
Yes you can, but it is not supported in every browser. Webkit (Chrome etc) has support for this using css:
-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer
Read more: https://www.webkit.org/blog/363/styling-scrollbars/
In Internet Explorer you can user css like
scrollbar-face-color or -ms-scrollbar-face-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-arrow-color
-ms-scrollbar-base-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-track-color
Read more: http://msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx
As far as I know, other browsers do not support this at the moment.
no, that is not really possible. The scrollbar used by the browser is not an image placed inside the html page. It is part of the browser logic. You cannot simply replace that.
Here's an example, I'm looking at in in FF 3.6 and the input with background: transparent has a different border to the untouched one.
http://jsfiddle.net/Pa2Kd/
My hypothesis is that, when the style is unaltered, a native Win32 control is used, with its default settings (more or less). But when you do alter the style, a custom control is used, or a more customized version of the Win32 control.
I remember similar things from when I was a boy and toyed with the scrollbars in Internet Explorer 4: They look normal if you do not mess with them (the theme of the OS), but if you do, they get "flat". Another thing is buttons: Windows Aero buttons look like they do - there is not really much to change. If you want to change the color of the button, you need to "disable" Aero theming of the button, and you get an old-style 3D, or flat, button, depending on your browser.
Just some thought. I might be entirely wrong, for web design is not my major field.
I second what Andreas says.
I don't know why exactly this is neither. I deduct from experience that when one of the border background-color visual attributes is altered, the browser switches from "OS rendering style" mode to "create rendering rules yourself" mode. Sadly, to my knowledge there is no CSS way of getting back to the OS rendering style.
The only way I can see to deal with this is to define a consistent ruleset for controls - which is a shame, because it's a perfectly logical choice to leave those styles rules to the user's OS.
Like the others said, this is due to default OS styling that is cleared as soon as you add any properties. You can mimick the default styling with CSS, though it would probably be overkill to do an OS detection and apply different CSS rules accordingly. Instead you could choose an OS styling that you like and apply that as the default for all text-inputs. Mac OSX styling can be reasonably reproduced with the following CSS:
#background {
background: transparent;
border:1px solid #ddd;
padding:2px;
-webkit-box-shadow:inset 0px 1px 2px #333;
-moz-box-shadow:inset 0px 1px 2px #333;
box-shadow:inset 0px 1px 2px #333;
}
Season to taste.