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.
Related
What does the CSS standard say about unsupported expressions? How should a browser deal with them? How do actual browser implementations deal with them?
I'm implementing a CSS property optimizer (for a minifier project), and we want to leave CSS fallbacks intact. Our goal is to optimize the CSS as much as possible but in such a way that it should render exactly the same as the original.
This is why it's essential for me to understand how these things work.
Simple properties
For simple properties, it's really easy.
Let's say we have this:
div {
color: #f00;
color: rgba(1,2,3,.4);
}
In this case, if the browser doesn't support rgba then the first declaration #f00 wins. There is no question here.
Shorthands
However, how does it work with shorthand properties?
Here's some code:
div {
background: #f00;
background: rgba(1,2,3,.4);
}
How does the browser render this if it doesn't understand rgba? As you know, the syntax of background is: background: <color> <image> <repeat> <attachment> <position>; and such a shorthand declaration overrides any of the 5 fine-grained declarations that came before it; so the difficulty lies in which one of the 5 fine-grained properties the browser tries to assign the unknown token to. I have several possibilities in mind:
the browser decides it doesn't understand the latter declaration at all and drops it entirely
the browser thinks that rgba(...) represents a background-image and even though it doesn't know what to do with it, clears out the previous background-color as well
the browser thinks that rgba(...) represents a background-color and since it doesn't understand it, falls back to using #f00 instead
Let's make it even more interesting, say we have this:
div {
background: #fff url(...) no-repeat;
background: rgba(1,2,3,.4) linear-gradient(...) repeat-y;
}
How does a browser interpret this CSS snippet, ...
if the browser doesn't understand rgba?
if the browser doesn't understand linear-gradient?
if the browser doesn't understand repeat-y?
if the browser doesn't understand any two of the three?
if the browser doesn't understand any of the three?
The parsing rules in section 4.2 of the CSS2.1 spec speaks in terms of declarations, which refer to entire property-value pairs, regardless of whether the properties are shorthand or not:
Illegal values. User agents must ignore a declaration with an illegal value. For example:
img { float: left } /* correct CSS 2.1 */
img { float: left here } /* "here" is not a value of 'float' */
img { background: "red" } /* keywords cannot be quoted */
img { border-width: 3 } /* a unit must be specified for length values */
A CSS 2.1 parser would honor the first rule and ignore the rest, as if the style sheet had been:
img { float: left }
img { }
img { }
img { }
A user agent conforming to a future CSS specification may accept one or more of the other rules as well.
Notice that the third example shows the use of an illegal value for the background shorthand property resulting in the entire declaration being ignored.
Although the spec speaks of illegal values, as far as an implementation is concerned an unrecognized value and an illegal value are the same thing, since either way the implementation doesn't know what to do with such a value.
So the answer to the first part of your question is
the browser decides it doesn't understand the latter declaration at all and drops it entirely
And the answers to the second part are all the same: the latter declaration is ignored entirely.
As far as I know, if a browser cannot understand even a part of an expression, then it handles the property as syntactically wrong, and ignores the whole line.
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.
In IE10, a focused textbox containing a value will have a little x added to the right of them. This x allows a user to click on the textbox in order to clear its value.
Other questions have touched on removing this feature from the user's view, but I wanted to maintain the feature in addition to adding my own icon to the right of the textbox, such as a search icon. Unfortunately, those icons end up colliding, so I needed to determine a way to move the icon and my searches never turned up any results.
The question that I kept trying to answer: what other properties can be used with the IE10+ ::-ms-clear pseudo-element?
UPDATE: As the other answerer pointed out, the MS documentation has been updated as June 19, 2013 to include all of the properties available to ::-ms-clear. It's unclear if this applies to IE10 rather than the currently forthcoming IE11, so I will leave the rest of the answer below.
For completeness, they have also updated the documentation for ::-ms-reveal, which appears to be the exact same as ::-ms-clear.
The answer below at least applies to IE10.
I cannot find an exhaustive list, which lead me to experimentation:
::-ms-clear {
margin: *; /* except margin-left */
background: *;
color: *;
display: none|block;
visibility: *;
}
Unfortunately, I was not able to trick IE's developer mode (F12) into showing me the ::-ms-clear properties in the style tree, so I had to try things by hand and reload the page in order to experiment. I even tried cheating by adding onblur=this.focus(), but that did not work.
CSS properties that did something, and seemed useful:
margin: The margin gave me a way to shift it from the right side of the textbox. I shifted it by the size of my icons, plus 1-3 pixels to give a buffer. Only margin-left does not seem to work.
background: The background of just the x. Applying any background settings puts your desired content behind it; it does not replace the x!
color: Controls the color of the x.
display: As the question that got me here notes, none will hide the x.
visibility: Seems to work as one would expect similar to display.
You can combine the color and background to replace the x with a different background image so long as it fits within the given size of the x, which appears to be around 20px, but that is just me eyeballing it.
::-ms-clear {
color: transparent;
background: no-repeat url("../path/to/image") center;
}
CSS properties that did something, but did not seem useful:
padding: It affects the x, but never as I actually expected its effect (everything seemed to hide the icon, or at least shift it out of view).
position: Identical behavior as padding. Admittedly, I am much more of a programmer than a designer, so this may be my own shortcoming.
CSS properties that I guessed might do something, but that did nothing at all:
text-align
float
Adding other CSS pseudo-elements does not affect ::-ms-clear. Specifically, I tried ::after and ::before on it with content: "y", and neither one got a result.
Obviously it depends on the size of the companion icon that you intend to apply to the textbox, but I use 14-16px icons and I found that margin-right: 17px gave the x a clear gap, which shifts the x to the left of my right-aligned icon. Interestingly, margin-left seems to have no effect, but you can use a negative value for margin-right.
The actual CSS that I ended up using, which prevented my icon from being covered by the x.
[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear {
margin-right: 17px;
}
My icons all share the same base name, tbc-icon-, which means that the ::-ms-clear pseudo-element is automatically applied to all of them whenever they are applied. In all other cases, the pseudo-element behaves in its default manner.
Of interest, ::-ms-reveal seems to behave the same way, and if you were going to apply icons to password fields (far less likely I expect), then you can follow the above example:
[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear,
[class^="tbc-icon-"]::-ms-reveal, [class*=" tbc-icon-"]::-ms-reveal {
margin-right: 17px;
}
One list is available on MS site, at least.
http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx
(But maybe I misunderstood the question.)
When using vendor prefixes, it’s important to keep in mind the order in which you list rules in your declarations.
I already know how vendor prefixes work and why there are needed, but why is good list the vendor-prefixed property first, and the non-prefixed CSS3 property last? I also checked many important sites and they are using this approach:
.foo {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; //why this is the last one?
}
That's it, why put the actual CSS3 property last? There is a special reason?
With the W3C propriety as last, new versions of browsers use this version instead of the vendor version. In this way your CSS is read as a normal CSS without vendor prefixes.
In this way new browsers will use the W3C version, updated to the latest specs, if supported by browser.
Useful resource is http://taligarsiel.com/Projects/howbrowserswork1.htm and http://www.w3.org/TR/CSS2/grammar.html, maybe you`ll find your answer there.
Here is a good reason: [summary of this post which Andy mentioned]
During the period where browsers support both the vendor prefixes and the actual property - there might be differences in the implementation of the css rule.
Example:
.not-a-square {
/* These do totally different things */
border-radius: 30px 10px;
-webkit-border-radius: 30px 10px;
}
The spec or "real" version will render the top left and bottom right
corners at 30px and the top right and bottom left corners at 10px. The
vendor prefix will render all four corners with elliptical corners
30px wide and 10px tall.
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