foolip · September 20, 2023 09:49
diff --git a/2023_css_missing_features_freeform.txt b/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)
 より詳細な縦書きのスタイル
 인접한 부모 선택자
	"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)
	より詳細な縦書きのスタイル
	인접한 부모 선택자