2023_css_missing_features_freeform.txt

"leading-trim" support
"squircles" for border-radius
"stuck" when a sticky element is stuck
1) reliable print styles, 2) better styling options for some HTML elements
::stuck for position sticky
:is-stuck – know when a position:sticky element is being sticky.
:stuck pseudo selector for position: sticky elements
:stuck pseudo-class for sticky elements
:stuck pseudo-selector for position sticky! expanding width for inputs!
:stuck selector for sticky State
A lot of physical values are still missing logical counterparts (e.g. `object-position`)
A more easy  and powerfull approach to animations
A pseudo-class for element that are "pinned" when their position is :sticky
A pure CSS way to render counter values as property values. 
A selector for when a sticky element (position:sticky) is in its stuck state, like :stuck
A shorthand for width and height! Pseudo elements on self-closing HTML elements like <input>
A width and height shorthand. Maybe something like "size/dimensions: 100px, 200px;".
A11y features like Speak API
Ability to override rules in order specified in Html class attribute rather than CSS file
Ability to prevent scroll on element, but without setting "overflow: hidden" or etc, because it causes layout shifting and scrolling position reset. I found, that "overscroll-behaviour: contain" on the overlaying element helps a lot, but it's kinda hack
Ability to style e.g. Select or Video element internals more.
Add external stylesheet included with link to a cascade layer
An easy and intuitive way to create equal-width columns based on the widest column in a grid/flex.
Anchor positioning, View transitions 
Animate Background 
Animate from display none to block and backwards
Animate to auto ESPECIALLY
Animating Content between different positions in the DOM (programmatically or via drag & drop)
Animating to-&-from display: none
Begin able to use attr() for other things, not just content in ::before/afters 
Being able to use html attributes for css rules, without having to declare all expected instances of it
Better interpolation of styles across container sizes. Example: https://css.typetura.com/ruleset-interpolation/explainer/
Better overflow and container support/tools
Better styling for lists (padding, margin)
Better support for responsive number of grid columns / Better support for bento layouts
Better support for the CSS fragmentation module
Border radius logical shorthands
Border radius support with border-image (gradient)
CMYK and LAB colors for printing via CSS
CSS Anchor
CSS Container Queries
CSS TOM support for individual transform properties and typed registered properties; values to get the child index (nth-child) of the current element and the total number of siblings; attr() for any property; open-stylable shadow roots
CSS variables to conditionally apply styles
CSS-only hyphenation
Canvas scope is complicated. The browser should automatically do more: eg. No orphans, widows etc. Automatically apply DARK MODE using generic colours etc. 
Change style by clicking as we have in hover
Checking state of which position-fallback is used in the Anchoring API
Color contrast for visual impaired
Color functions
Color manipulation functions cross browser
Complex selectors in :host() and ::slotted(), especially :has()
Conditionals
Confusing align-content, justify-items, justify-content, align-items,… wtf (it seems to be different between flex and grid)
Control on inputs (date, time, file, number) and html5 validation without having to rely on javascrit components
Defining pseudo elements/properties in Native Web Components
Detect if elements with sticky position is in "stuck" mode (e.g. a navigation bar)
Detecting if something is is sticky with `position: sticky;`
Different gaps in a grid or flex container, so maybe by setting a range of gaps that would need to repeat
Dividing by a unit in calc() as described in the spec but not implemented yet
Dropdown Customization (`<select>`)
Dynamic heading tag to respond to relative h1-h6 tags 
Element inner scroll when it's height is dynamic
Elements sizes are harsh. Sometimes it's hard to laytous items like I need, I continuously fight with width: 100%, applying the same style the whole three of elements.
Extend rule, and container pseudo element are the big ones
Floating element positioning (tether, popperjs, floatingui...)
Form element styling to be a lot easier
Form element styling, eg. select, option, date, input with list
Form styling
HTMLElement default styling override
I feel there should be a more intuitive and one line or maybe more lines of CSS to center a div
I honestly don't care. I would find anyone saying CSS is lacking in 2023 needs to have their head examined. We are spoilt for choice.
I want all the colors functions you can think of
I would like to have a function, that gives the ability to get computed style of another element, by a selector or specific name specified via some property similar to container-queries, for example - .foo { padding: computed(#bar).padding }, with fallback - .foo { padding: computed(#bar, 1rem).padding }. Of course, nowadays CSS Variables could be used to reuse styles and @container Queries to get an intrinsic size of another element.
I'd like to have 1) clip-path values working with calc(). 2) Scroll transitions available everywhere. 3) a way to print css variables with the content property.
I'm not so advanced
In the same league as mixins maybe but functions. CSS would replace scss by a heartbeat
Leading Trim (text-box-trim)
Length of element (get count of children)
Less complexity. I want fewer features, not more
Logical properties for transform / translate, background-position, gradient angles
Looping and custom functions
Loops
Loops
Manipulate images, infinite scrolling (cycling the contents in a scroll container), indefinite spans in Grid
Many more, can only choose 5
Math with non-numeric values. e.g height: min(auto, 100vh - 130px), this doean't work because auto is not a number
Media Queries in inline styles
Mixins
More programmatic elements
More states, e.g. style an input based on it being empty or check if an element is sticky
Multiline ellipsis
Native control over the scrollbar
Native utility classes
Nested comments or single-line comments
New responsive media querys, already created for just used. Like sm, lg or xl on boostrap but in a native way on CSS
On click case 
Overflow detection
Overflow detection; Overflow redirecting (fragmentation)
Parent Selector
Parent selector
Parent selector
Parent targeting. When for example a parent has a specific child that you can apply css to that parent
Performant transitions of more CSS properties — built-in FLIP as a default
Popover positioning.
Position fixed viewport (https://github.com/w3c/csswg-drafts/issues/7475)
Previous sibling selector
Proper support for CSS Modules (web components)
Pseudo class :stuck when sticky element stops scrolling with document
Query children's properties in selectors
Random, child-count, sibling-index, variables in selectors, more states e.g. stuck
Real (simple) variables like $foo.
Scroll Animation interpolation for users using a dented scrollweel. 
Scroll detection / trigger 
Scroll linked animations
Scroll timelines
Scroll-driven animations, control over the easing and duration of scroll-snap
Single line comments like // in JS
Spring Animations
Spring animations, simple exit animations
State detection, e.g. is sticky
Sticky detection
Sticky position detection
Sticky positioning detection
Sticky positioning inside a container
Style & state container queries
Style form input elements, selects, date, etc.
Style-quries
Styling a position:sticky element depending on its stuck or non-stuck state
Styling native elements (radios, checkboxes, date pickers)
Styling native selects
Styling options for native controls (pretty much what https://open-ui.org/ try to solve)
Targeting element with nested element WITHOUT any text
The ability to make an element escape its parents overflow: scroll setting. So if the specific element was scrolled or moved outside its parent, it would escape the overflow and still be visible.
The opposite of ~ and + in selectors / target sibling selectors better. Please ship text-wrap: balance asap T_T
This may go with scoping, but being able to access a parent element would have come in handy several times recently.  May be related to postprocessors I use also.
Transition not applying to display (especially from display none to block or flex or whatever) and some other properties.
Transitioning to non fixed width/height (100%)
Truncation text at the start and at the middle, Easing Gradients
Truncation text at the start and at the middle, Easing Gradients
Universal selector for pseudo elements
Use counter for other things than list marker (want to use it for z-index for example)
Use grid auto rows with subgrid e.g. *without defining a row template* span a card across three rows and then 3 card child elements can align on rows
View transitions class name support
Would love to be able to style the title attribute.
Wrapped text width
`index` keyword for :nth, inheritably resizeable checkboxes and radio buttons, retain border-radius with border-image, states like :stuck, extending attr() contexts
a Random function
ability to position between values and out of view condition 
allow attr() for other settings like colors etc. This could be extremely usefull. Currently only works for "content"
an event that gets emitted when element with position: sticky actually "sticks" or "unsticks"
animate to visibility: hidden or display: none
animate/transition grid/flex wrap, animate/transition from relative to absolute positioning
animating height or display property
attr()
attr() for all properties (Browser support) 
attr() on properties other than content
color contrast functions
custom css states
cylindrical/curved 3D transform/wrap, like the UI in cyberpunk 2077 and the direction AR environments are headed
default supported light and dark mode; no more fidgeting with html.darkMode/html.lightMode
define keyfames with time, not %
detecting "stuck" elements (those with position: sticky that are "stuck")
events like js
flow control: loops and conditionals
font-size: fit-container
form controls - styling everything
full width elements in a container that has a stable scrollbar gutter
hanging punctuation
leading-trim
leading-trim
leading-trim!!!!!
loops, like for or forEach. Functions, Animation base on scroll or scroll position, ability to run animation on scroll behavior withouthe page scrolling (a way to stop scrolling the page without using overflow: hidden). Start and End markers for animations. a batter animation timeline that is not base on persantace)
more introspective keyworks like 'currentColor' 
no css at all
no idea as still trying to lean
note: pinterest IS Masonry style, not the other way…
nth-line (or nth-anything, really)
overflow-block / overflow-inline + :open / : closed + var() in @container
overflowing state detection
position sticky selector for stuck/unstuck
position: sticky & :stuck state
pseudo :stuck for sticky elements
pseudos for when a `position: sticky;` element is "stuck" to viewport, top of parent, or bottom of parent.
random() functions (noise,...)
scope 
scrollbar styling (e.g. overflow: overlay)
selecting the parent of an element
sibling-count() and sibling-index()
sibling-count(), sibling-index() and unit division
squircle border radius
starting-style
styling option in select/datalist.
target child's parent element
text flow container control
text-box-trim
text-box-trim or leading-trim
text-decoration underline animation options would be great, as calculating the baseline size for every font on every font-size is bothersome for animated background-size underline solutions is bothersome
the option to style a parent based on the child's content 
the web is great now, I used to be Flash developer, but in regards to animations it is still behind of what Adobe Flash was capable 20 years ago. 
usability. the language is harder than it needs to be. Stop with the features and unncessary complexity.
using attr() as a value for any css rule.
using data-attributes as values on css, example <div data-opacity="50" style="opacity: calc(attr('data-opacity') / 100))" />
using the "attr()" to get the content of a html's tag attribute value from the css rule it is on
z-index is poorly designed
•"hang on x" or hanging-indent with any designated character (like page layout indesign does) but without hacks, • better system UI styling options (detail/summary marker and label, columns, etc)
より詳細な縦書きのスタイル
인접한 부모 선택자