This may be a trivial question to answer, but is there an equivalent to input { border: initial; } that works in IE8 & 9?
I would be fine with nested boxes with explicit borders just to get the default IE look if anyone knows what the colours are (since they can be overridden with initial in other browsers to clear them).
Things I've tried already: 2px inset #XXX with various values for X; 2px inset threedhighlight; -ms-initial
No. And initial doesn’t mean “browser default”. It means the defined initial value for the property, as per CSS specs, irrespective of browser defaults. For border, it is thin none followed by the value of the color property. (The initial value is supported by Chrome, but not e.g. by Firefox or IE 9.)
You can try to explicitly set a property to a value that you expect to be a browser default, though this often varies by browser version. The page http://www.iecss.com is described as showing IE default style sheet features. According to it, the following is applied in IE 6:
background-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
For IE 7 thru IE 9, the page has the same declarations, except for border-style, which is missing. This is impossible since the initial value is none. Maybe the intent is to say the border style is not describable in CSS. But to me, it really looks inset.
To keep some properties of some elements to their browser defaults, just don’t set them in CSS. Use selectors that exclude them when needed. This may require added markup at times.
Related
In Firebug, CSS would automatically be converted from longhand into shorthand.
Example:
div {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;
}
would then be converted by Firebug into:
div {
padding: 10px 0;
}
However, now when I use Firefox Developer Tools, there is no auto CSS shorthand conversion.
Is it possible to get the new Firefox Developer Tools to automatically convert longhand CSS into shorthand CSS (like how Firebug does)?
No, it's not possible. Firefox Developer Tools displays properties exactly as they are declared in each rule in the stylesheet; in that sense, it doesn't display properties per se, it displays declarations.
If the rule has a padding shorthand declaration, the inspector reflects that shorthand (and allows you to expand that shorthand into its longhands so you can manipulate them individually). If the rule has two of four longhand declarations for padding, the inspector reflects just those two longhands.
This is by design, and prevents the sort of confusion that automatically rewriting longhands into shorthands for the sake of brevity creates (namely, the fact that padding-top: 10px; padding-bottom: 10px is not equivalent to padding: 10px 0).
This is not possible in the Firefox DevTools. It's by design that the DevTools display the property declarations as they were entered. One reason for that is because they indicate which declarations were changed by the user (via a small green line at the left side of the declaration).
Firebug, on the other hand, output what's returned by the CSSRule.cssText API, which outputs a serialization of the CSS rule and turns longhands into shorthands where possible. So, Firebug did the opposite of the Firefox DevTools and always displayed the shortened version of a CSS rule were applicable and there was no way to show them the way they were authored.
So, if you want to get a short version of your CSS rules, you need to call its cssText getter via JavaScript.
I have a dropdown list in my application whereby in order to center it I must add padding-top 10px while on Mozilla Firefox but on google chrome it does not need the padding. How can I target the select list to set this browser specific. I was hoping I could have done something like the following:
select {
-moz-padding-top: 10px;
-webkit-padding-top: 0px;
}
Any ideas of how I could get round this? Fiddle of problem shown below, if you check this in Chrome and then Firefox, I want it so that text is always in middle
http://jsfiddle.net/uHDa6/
Note: the first part of this answer is now obsolete, as this feature has been removed from Firefox. For the real answer, read on from "However".
The answer to your question is: yes, it's possible to put Mozilla-specific CSS in a stylesheet. (Not in an inline style attribute.)
In this case, you would write
#-moz-document url-prefix() {
select {padding-top:10px;}
}
which is simply the Mozilla-prefixed version of the #document rule, that is not recognised by other browsers.
However, the actual solution to the problem of the mismatched text position is to not set the height, but only the padding of the select. No hacks.
style="font-size: 14px; padding: 11px 0 11px 5px;"
That has the desired effect in all browsers. See new fiddle.
I'm trying to create an alternate design to a site as a fallback. I can't really change how the system is architected. A main stylesheet is loaded, and a second is loaded after it. I have control over the second stylesheet. There's a lot of the CSS that I want to reset, specifically form elements.
However, I'm having difficulty with that. For example with a <button>:
background: rgb(88,222,255);
border-radius: 4px;
border: 1px solid #91d7eb;
box-shadow: 0px 2px 4px 0px rgba(1, 75, 138, .8);
color: #FFF;
cursor: pointer;
font-family: "Graphic-Font";
font-size: 25px;
font-weight: bold;
text-shadow: 0px 1px 3px #014b8a;
padding: 10px 40px;
While I can set background: none, border-radius: none` and so on, what happens is the button has no style, rather than the default browser style. I have to get the form elements to be the default browser style, among many other elements on the page. But I can't seem to get at least the form elements to be unstyled.
For Clarity
Simplifying the question: How does one re-style a <button> back to default?
I would suggest using a CSS reset as a starting point (Eric Meyers' is probably the most famous).
I think you're running into trouble on things where you don't want to set your own style, but return it to the browser default (e.g. you don't want margin:0; on everything, you want the default big margin on the H1, the default smaller one on the p, etc.
You can actually get copies of the user agent stylesheets, modify them to make them more specific, and include them to overwrite. Here is a site that has copies of a lot of default UA stylesheets. A problem here is that every browser uses their own, so unless you browser detect and serve selective stylesheets, it's not going to really look like it normally does for that browser. However, I think that's ok. I'd actually suggest you just pick a browser default you like and set all browsers to look like that, or you can use the W3C's suggestion for default browser styles.
All of this doesn't solve your problem though, because styling form elements is hell. As soon as you apply a style, some browsers will switch the rendering mode for the form element so you can never get it back to the original style. For example, IE7 doesn't support rounded corners, yet their default buttons have rounded corners, because it renders in Windows OS style. But as soon as you give the button a border, or some other style, it loses that nice Windows shaded rounded corner default look, and there's no way to get it back without using an image!
So really, I wouldn't shoot for trying to get browsers to go back to their native default style. I'd use a UA default stylesheet, and then modify it so make a sort of generic, cross-browser, cross-system default. It won't look like the native unstyled code, but it will look close enough.
You need to understand how CSS specificity works. You can overwrite any CSS rule, by making it more specific than other rules.
For example:
<div class="content">
<div class="wrapper"><span>Hello World</span></div>
</div>
CSS:
.content .wrapper span { ... }
.wrapper span { ... }
In this case the first declaration will overwrite the second, because it is "more specific". You can usually just go up the tree one level and specify the wrapping element or the wrapping class to override an inner element's rule. This is really handing on a lot of CMS systems, such as WordPress, where you don't have access to the main stylesheet, or just want to leave it alone and re-skin the parts you want.
Read the article, it's important.
CSS Specificity: Things You Should Know
I'm trying to find a resource that has a list of browser specific implementations of CSS properties that deviate from the current W3C standards.
For example, say IE supported something like this:
.my-class {
-ms-foo: fizz buzz;
}
but when the proposal became a candidate reccomendation the standardized equivalent was:
.my-class {
foo: buzz fizz;
}
In order to support versions of IE released before the CR, I'd want to write:
.my-class {
-ms-foo: fizz buzz;
foo: buzz fizz;
}
Googling for a list of these sorts of changes hasn't been terribly fruitful, there's a lot of wailing and gnashing of teeth around vendor prefixes but not a lot of "gotcha" lists. Best I've found thus far are offhand mentions of changes (in that case, -webkit-border-radius), but those rarely document the actual expected input; they tend to just give a broken example.
I have found an OK list of the prefixes that exist (along with their standard status), but unfortunately it doesn't give the kind of details necessary for spotting the changes I'm interested in.
So, do any such lists exist?
I'll take partial lists, or ones that exclude really old browsers (don't really care about IE6, for example). I'm also only really concerned about the big 3.1 browsers (IE, Firefox, Webkit/Chrome/Safari, and Opera).
I also care about things that haven't been addressed by the W3C (like appearance), this is a hard enough problem without worrying about the things vendors have straight-up made up.
I find CSS3Info useful: http://www.css3.info/preview/ (edited - sorry, this is what I meant to post originally).
EDIT: Hmm. I'm batting zero today. I could have sworn there was more on browser prefixes on that site...
There doesn't seem to be an exhaustive list out there, but based on Compass, CSSPrefixer, and this list from Peter Beverloo here's what I can scrape together.
background-clip
-moz-background-clip accepts padding and border instead of padding-box and border-box
-webkit-background-clip behaves the same as the -moz version, but also accepts content instead of content-box
background-origin
-moz and -webkit versions accept the same values as their background-clip equivalents
background-size
-webkit-background-size duplicates single values, so -webkit-background-size: 10px is equivalent to background-size: 10px 10px. The prefixed webkit equivalent of background-size:10px is -webkit-background-size: 10px auto;.
border-radius and friends
The -moz equivalents of border-top-left-radius, border-bottom-left-radius, etc. are -moz-border-radius-topleft, -moz-border-radius-bottomleft and so on.
-webkit-border-radius differs from the final spec in it's handling of the two value shorthand. Webkit treats it as if all the long form versions were passed two values.
More concretely:
-webkit-border-radius: 1px 2px is equivalent to
-webkit-border-top-left-radius: 1px 2px;
-webkit-border-top-right-radius: 1px 2px;
-webkit-border-bottom-left-radius: 1px 2px;
-webkit-border-bottom-right-radius: 1px 2px;
while border-radius: 1px 2px is equivalent to
border-top-left-radius: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 2px;
The only work around I know of for this is to expand the two value case of -webkit-border-radius into it's long forms so as to match proper border-radius.
display
If you want diplay:box to work everywhere, you need to use prefixed values like so:
display:-webkit-box;
display:-moz-box;
display:box;
I have no idea why this is, as all the box model specific properties (like box-align) also have prefixed versions in those browsers.
Note that this doesn't include anything that's not currently part of a W3C document, like appearance, even if multiple browsers support it.
Deviations from the standards are not uncommon (i.e. rendering quirks) but deviations from the standard/proposed notation are fairly rare imho, this resource should do the trick:
caniuse.com normally provides good external links in resources section, e.g. for border-radius it linked to -webkit differences and this exhaustive rendering overview
While some people use this reset.
* {
margin: 0;
padding: 0;
}
Is every element has default margin and padding in each browser default stylesheet( but differently)?
While eric meyer collected some most used selectors and given this to all
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Are those elements has different type of font sizes?
different baseline, different background, outline and border?
if we keep besides cons of universal selector.
is this
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
better than this
* {
margin: 0;
padding: 0;
}
You can find all default styles here: CSS2.1 User Agent Style Sheet Defaults.
If you investigate the list closely, then you'll notice that the browser-specific margins are only set for HTML-standard block elements and that nowhere a browser-specific padding is been set. In other words, the padding: 0 is superfluous. But indeed, the margin is the most disbalanced among browsers, to answer your actual question.
I am probably going to tread on someone's toes here, but in my humblest opinion using a CSS reset stylesheet is ridiculous. You would have to redefine most of those margins (and paddings) yourself anyway. You could as good just learn and keep yourself the rule to define yourself the margin (and if necessary padding) for every block element which you're going to use in the document.
As to the remnant of the reset:
The border: 0 is superflous as well. The <hr> and the most form input elements are the only elements which have a default border. Without it, the <hr> is invisible (actually, this fails in IE6/7) and the text input elements on a form with same background color are invisible as well.
The outline should certainly not be resetted, it breaks accessibility. You need to control it yourself, e.g. resetting it yourself on only links with a (background) image since that's the major reason to reset it. But still, it breaks accessibility. Rather consider giving it a different outline color or style so that it is still visible, but less disturbing.
The font-size: 100% would force you to redefine them yourself in the <h1>, <h2>, etc elements. But even without the reset, you would often already like to do that anyway. What's the point of this reset then?
The vertical-align: baseline; breaks alignment of <sub> and <sup> so that they look like <small>. Further the table headers may also be affected. Those defaults to middle in all browsers. You would need to redefine them yourself again. Plus, it is known that this reset may cause IE6/7 to go havoc with images.
The value of background: transparent; is unclear to me. I don't see any point of this reset expect that it may make IE6/7 mad. You would also need to redefine the background color for all form input elements yourself again which just adds more work (for the case they're placed in a colored container). I am sure that whenever you encounter an element which needs transparent background, you could easily spot that yourself and set it yourself.
Enfin, see what you do with this information. I don't stop you from using the CSS reset. I myself have found the CSS reset only useful >10 years back when I was just starting with HTML/CSS. But with years and years, I've learnt as well that this is plain nonsense. But I admit, it's useful for starters since the reset will force them to set the margins and other stuff themselves explicitly. Which you could do as good without the reset.
Well, 'better than this' is hard to say, but the one with more stuff does more.
outline 0 makes links not have the dotted border around them.
Border 0 makes images and such not have a border around them.
font-size: 100% probably does something like ensure the fonts are 100%.
vertical-align: baseline sets all vertical alignments to the bottom of the container,
background: transparent prevents some png problems.
but margin:0 and padding:0 are two that defiantly should not be omitted from your reset list.
The short answer is: Feel free to set all of those if you are ready to override it for any element that may need it later.
However, note that you may have a lot of work ahead of you when it comes to form elements. They require at least a border to look good, and some of them (e.g. buttons) need a padding too. Also, some browsers display a 3D-ish border around buttons by default. If you set border to 0, you will not be able to get that 3D look back using CSS.
Also, you might want to check out http://www.blueprintcss.org/. It equalises browsers quite well, it seems, though I haven't tried it myself.