2023_css_interoperability_features_freeform.txt

 'svh', 'lvh', 'dvh', 'svw', 'lvw', 'dvw'
-webkit-background-clip
::-webkit-scrollbar
::marker
:focus-visible is supported, but it's still too soon for us to use it.
:has
:has()
:is
:not()
:not()
:user-invalid
:user-valid and :user-invalid
:where
:where()
:where()
<foreignObject>
<select> and <option> styling
<selectmenu>
<selectmenu>
@font-face size-adjust
@media print and (orientation: landscape/portrait)
@page
@scope
All of the above at the moment as I have not coded in 2 years
Anchor
Anchor positioning
Anchor positioning
Aspect ratio
Aspect-ratio
Aspect-ratio
AutoPrefixer
Background sticky 
CSS Anchoring
CSS Houdini
CSS Nesting
Color-contrast
Colore mixing
Custom Media Queries
Flex gap
Flex gap
Flex gap
Flex in safari
Flex-gap, grid, css custom properties
Flexbox gap on older iOS
Gap
Grid
Guess I avoid new stuff overall just because of support between browsers!
I Check caniuse before using new css in a new project 
I avoid a LOT because I can't be sure. check caniuse if there's a question, but I only stick with old-school stuff to make sure it works.
I can't think of specifics right now, but I often have trouble with Safari. Recently we abandoned IE11 support so most features work without difficulty across all browsers.
I want to style that sneaky file upload button!
I work a lot with e-mail development, and the lack of support across the board is frustrating.
I'm not testing browser compatibility for the moment
I'm stuck supporting IE.. so a lot of them
In Norway, the public streaming service (NRK TV, tv.nrk.no) needs to support Safari 14, which is the most troublesome in regards to CSS feature support, as more than 2% of our users are on that platform. Suprisingly, Firefox we no longer need to support, as the usage in Norway for our product has declined to less than 2% :(
It's common fear that I can't use something just because it could backfire somewhere. JS bundlers take care of it JS-wise and I don't know if there's something like this for CSS
Lack of browser support for calc() unit division is why I avoid many of the CSS Math Functions
Lch, lab
Logical Properties
Logical properties
Lot of thing, especially with regards to custom elements/shadow dom
MPA view transitions 
Masonry grid layout, image-set
Media Style Queries, relative colors, color-contrast
More than just this but some other things are more usable thanks to postcss-preset-env.
Not sure why this maxxed out at 5, but all of the above. None are stable enough yet and most are hard to use with progressive enhancement (except scrollbar styling, that I've used)
Object-fit: scale-down
Page Transition API
Please ship text-wrap: balance in all browsers... 
Popover API
Proper support for CSS Modules (web components)
Properties and pseudo-elements for form controls and similar elements, such as <meter> and <input type="range">
Relative Color
Relative color syntax 
Relative color syntax, color-mix(), Typed OM, margin-trim
Relative color, some SVG properties (e.g. "d: path(<...>)"), Safari does some weird things with compositor layers; Houdini paint worklets
Relative colors
Relative colors (“from” syntax) and style queries
Resize nuanced. V. complicated using touch mouse & JS values. 
SVG filters
Sadly, I’m not up to speed on any 2023 features.  
Safari
Safari 
Safari bugs and missing features
Scroll snap
Scroll-linked Animations
Separate transform properties
Slider styling (range-type input, <input type="range" />
Style queries
Style queries
Svg 
THE SHADOW REALM
Text decoration module
The Text-wrap property
Transform individual properties
Transforms / animations
Truncate
Usually Chrome is the offender 
View Transition API
View Transition API, Transition
View Transitions
View Transitions
View Transitions API
View Transitions API
View transitions
View-Transition-API
`background-position: fixed;` is unimplemented in Safari on iPhones and iPads. (the image simply goes missing)
`text-wrap`
a bunch of properties still require the webkit prefix in some browsers despite non-prefixed implementations available
advanced attr() support
all of listed. We still support safari 6
all of them
anchor positioning
anything bleeding edge, half of these aren't fully supported
aspect
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio
aspect-ratio & flex gap
aspect-ratio (due to limited support in older Safari)
aspect-ratio, doesn't work on older phones
aspect-ratio, flex "gap",
background attachment fixed
background-attachment
background-attachment
background-attachment
background-clip
background-clip for applying background effects onto a run of text
balance-text
blur()
boostrap
box-shadow
clip-path with safari
color-contrast()
color-mix()
color-mix()
color-mix, color-contrast, multi-keyword syntax for display property
color-mix, flow-relative float
content-visibility, can’t wait for Firefox and Safari support!
custom scrool bar on firefox
derwer
display: contents;
dvh
dvh
element(), houdini paint api
everything from css-color-4 and css-color-5
flex gap
flex gap
flex gap, aspect-ratio
flex gap, but it seems to be fixed now when i checked "caniuse.com"
flex-gap
flexbox gap
focus-visible
focus-visible
focus-visible
forms design
gap
gap
gap
gap for flexbox
gap for flexbox
gap with display flex
grid
i don't know, i don't use any
image in list-style marker, text-box-trim, margin-trim
image-set
image-set
in fact, our service support previous version of browser(etc. ie) so it's difficult to use these new fantastic css skills. ;(
inset, gap, logical properties, ...
layers
line-height units, lh
linear() easing function
logical properties
logical properties + :dir()
margin-inline margin-block padding-block padding-inline gap aspect-ratio gap
mask
masonry
masonry grid
masonry layout for grid
max-content
mix-blend-mode: On SVG elements
native masonry grid
native resize of textarea is broken on Safari when padding applied. So I disable resize of textarea all-together and code it in JS.
nested c
nesting
no uso estas características de CSS
nth-last-child
object-fit
oklch
oklch()
outline curve in safari
outline is a good one. But really there are a TON of good answers here
overflow hidden on body to lock scroll on safari mobile :'(
position: absolute on iOS when Keyboard opens
prefers-reduced-data
relative color syntax
scroll-snap-type
scroll-timeline
some pseudo elements that show on firefox are hidden in chrome
still flex-gap :(
subgrid
subgrid, scroll-snap
svg transition(safari)
svh units
tables into text converters such as TXediotr and email support 
text-balance
text-overflow: balance & others
text-wrap
text-wrap
text-wrap
text-wrap
text-wrap
text-wrap: balance
text-wrap: balance
text-wrap: balance
text-wrap: balance, dvh and similar, @scroll-timeline
text-wrap: balance. this is essential for many components and i currently use javascript to achieve it which is causing heavy performance issues
text-wrap: balance; attr() in color, url...
text-wrap:balance
transform: translateZ
unicode characters and emojis in forms
variables (too many users on old safari/IE)
vh units (iOS safari)
view transition
view transition
view transitions
whole flex technology, `column-count` property
zoom