So I was checking out the SVG display attribute and for my surprise, I've found two CSS2 deprecated values (at least for me), those are compact and marker. Does someone have got more info to the respect? If I'm not wrong, SVG and CSS share too many properties, but compact & marker values are deprecated since CSS3
this is text defined by the W3C
The latest version of the SVG specification simply hands off the definition of display and visibility to CSS.
See the CSS 2.1 specification for the definitions of display and visibility. [CSS2]
For display in SVG anything other than none is treated the same.
Elements that have any other display value than none are rendered as normal.
Related
why ::marker pseudo-element not support all CSS properties like other pseudo-elements?
can anyone explain me in brief.
Found out today that ::marker pseudo-element not support all CSS properties like background, display, etc but "font-size", "color", and "content" properties are working like charm.
The CSS Lists specification explains:
NOTE: It is expected that future specifications will extend this list of properties and relax the restriction on which properties can take effect. However at the moment outside marker box layout is not fully defined, so to avoid future compatibility problems only these properties are allowed.
Because this selector selects marker of a list item. Like the buller for example. That means that it allows you only to customize the bullet, not the list itself. Thats why you cant apply properties like display, because you are effecting the marker itself. This can be helpful
The problem is that I cannot use some inline SVG at all. I noticed about <object > and SVG problems in FF. But the fact is that many other ones are working.
I faced 2 icons from a designer that not working. Not even fill property. It's just invisible. Nothing helps.
I cannot provide more useful information. All icons work as is. Except for this 2. In chrome no problems.
Upd:
https://jsfiddle.net/u0t4tupu/4/
Here an example. These two svg use different clip-path. But in some reason first one makes second one invisible. Try this example in FF. Delete first icon or set them same clip-path - url(#svgicon-h). Then it works. But why?
You have two elements with
id="svgicon-a"
One in each SVG.
id attributes must be unique in a document. If there is more than one on a page the results are browser-dependent. That is why you get a different result on Chrome than you do in Firefox.
The fix is to change the id in one of the SVGs.
https://jsfiddle.net/u0t4tupu/5/
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.
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.
Do the "::before" and "::after" pseudo elements not work on image elements?
Here's an example I put together...I'm just trying to get a yellow background behind the image here:
http://dabblet.com/gist/3861878
I saw this "answered" (but no other details) in another post, but can't seem to find anything about it elsewhere.
CSS 2.1 spec says:
Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.
http://www.w3.org/TR/CSS21/generate.html
So it it'd be wise to avoid using this. Behavior across the browsers is uncertain and can change in future.