First of all, I did use Google and SOF Advanced search but I didn't find this question.
Now to my question:
I know that initial sets the shadow to default i.e none.
Then what is the difference between these two keywords WHEN APPLIED TO BOX-SHADOW PROPERTY.
For some properties, none doesn't work so that time it is understood but it doesn't make sense in box-shadow and other such properties.
And I did read w3schools initial keyword page completely and I made this thread after reading that so please don't stick me that. :)
Please help me clear my doubt. :)
There is no difference according to CSS specifications and drafts. However, there is a practical difference, because not all browsers support the initial keyword. Such browsers ignore a declaration with the value initial. (If no other style sheet sets the property for an element, then the valus of the property is still its initial value.)
According to the CSS Values and Units Module Level 3 CR, initial “represents the specified value that is designated as the property's initial value”. For the box-shadow property, this value is none.
Related
I am seeing a single dash in the Chrome developer tools as seen in the image below.
What does this refer to? If it had a digit associated with it I would think it meant negative.
Nothing.
That's not a valid value for this (or any) CSS property, it looks like whatever generated that style either failed to provide a value or it's inserting invalid values on purpose (whatever that might be)...
Inspect the element and on the Styles tab (on Chrome) if the property value is invalid it'll show with a yellow explanation mark.
Whomever wrote that code just didn't know what they were doing. They declare padding-right 3 times in one style attribute, and all of them are invalid values (including the one that just says -2 with no units. If we go to chrome dev tools and we apply that same property/value to an element, we get this:
when you hover on the yellow triangle, it tells you that the - is an "Invalid property value".
What is the maximum value of duration in CSS transition-duration or transition-delay property?
I can't find this information.
I found only that default value is 0s.
I used these documents:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://drafts.csswg.org/css-transitions/
https://www.w3.org/TR/css3-transitions/
https://drafts.csswg.org/css-values-3/#time-value
As Guruprasad J Rao mentioned, the longest transition-duration possible is the number of seconds contained within the largest integer possible, which happens to be 2147483647. If anybody is curious, a transition-duration of 2147483647s is 68.24 years (including leap years).
This sounds ridiculous, I agree. However, there actually are use cases for this. For example, in my own project, I ran into a problem where webkit didn't let me change the background color of their browser-implemented input autofill. Overriding via "!important" didn't work because browser-implement styles are impossible to override like that. So, to stop the webkit autofill from changing my input's colors, I just used transition: background-color 2147483647s. Problem solved.
I'm looking at CSS transitions, in particular which CSS properties can be transitioed and their respective browser support. Struggling to find anything comprehensive on google.
I believe that not all CSS properties are transitional. For example, background: isn't, but background-color: and background-image: are.
Would this mean that CSS transitions only work on long-hand syntax? Or perhaps this example is just an exception.
Does anyone have a comprehensive list of properties that can be transitioned?
Would this mean that CSS transitions only work on long-hand syntax? Or perhaps this example is just an exception.
It works on shorthand properties, but only for specific longhand components that are animatable. This is mentioned in the CSS Transitions spec.
If you specify transition-property: background, for example, it will work, but only background-color, background-position and background-size, as well as gradient values in background-image, will be animated, and they will all animate according to the delay, timing function and duration specified for the background transition.
I suspect asking for links to lists of properties might be off-topic here, but for what it's worth, MDN contains a list of animatable properties.
For most properties, whether or not — and how — they're animatable is also described in their respective propdefs (specifications). For example, the definition of border-radius can be in the Backgrounds and Borders module:
Animatable: as two values of length, percentage, or calc
Like background-image, border-radius is a shorthand property, made up of four components (one for each corner). You can transition all four corners the exact same way by simply specifying transition-property: border-radius, and exactly one delay, timing function and duration.
There is animatable-properties package on npm based on the MDN list.
animatable.propertiesCSS is an array containing all the animatable properties in CSS format.
You can also get a list of them sorted by usage popularity based on Chrome's anonymous usage statistics.
console.log('First 10 properties by usage statistics:', animatable.popular())
console.log('All properties sorted alphabetically:', animatable.propertiesCSS)
<script src="https://unpkg.com/animatable-properties"></script>
The package also provides syntax for each property and ability to validate that syntax.
I've looked in Firebug but can't find why a CSS background property is being cancelled out. I've looked if there is a more specific rule but nothing. Please find the image snippet, as follows:
Maybe somebody has a suggestion?
Firebug will make you think a shorthand property like background or margin (maybe font) was cancelled out when in fact only one property was modified by a later/more specific rule
Use the Computed tab (close to the Style one) to see what's going on.
For each individual property, you'll be able to see which one is more specific and which ones were defined somehow but are cancelled out for real.
It may be a rule with !important modifier for example (meh) or usually a margin-top over a margin and the 3 other properties still with the values set by margin.
Does Firefox have any support at all for the alignment-baseline property? When I inspect (using Firebug) SVG elements for which the alignment-baseline property has been explicitly set, Firebug does not list this property at all (IOW it treats is as noise). No matter what value I assign to this property, the appearance of the displayed text never changes, further suggesting that FF ignores this property altogether.
(One other sign that FF's support for this property may be busted is that the link given in the page cited above for the CSS documentation for this property is dead-as-a-doornail.)
Assuming that, as it appears, FF does not support the alignment-baseline property, what is the value of this property that would most closely replicate FF's default behavior?
EDIT: For example, view this jsFiddle with both Chrome and FF; each line of displayed text displayed a highlighted word that has been produced with code of the following form:
<tspan style="alignment-baseline:alphabetic">alphabetic</tspan>
Note that all the lines look the same in FF, but not so in Chrome.
There are a few possible candidate values for this property to replicate FF's default behavior (namely, auto, alphabetic, mathematic, and inherit); unfortunately, this experiment cannot decide the matter, and it's not clear to me which of the possible options would match FF's default behavior in the greatest fraction of cases.
It seems that alignment-baseline is ment to be used only for portions of <text>, that is for elements tspan, tref etc. For the main <text> element use the dominant-baseline attribute.
(This is what #Tanel Eero wrote above as a comment. I'm re-stating it here so the question can get an accepted answer).
The Mozilla Developer Network website states that the style can only be used on certain elements:
The following elements can use the alignment-baseline attribute
<tspan>
<tref>
<altglyph>
<textpath>
So that seems to be your main issue as I understand that you are trying to apply it to a SVG.