Skip to content

Instantly share code, notes, and snippets.

@SachaG
Last active Aug 22, 2022
Embed
What would you like to do?
State of CSS 2021 Freeform Data

State of CSS 2021 Preliminary Dataset

This is a preliminary dataset (after ~2 weeks of running the survey) for the 2021 State of CSS survey.

It contains results to four freeform (textfield) questions:

  • Other CSS pain points* (aspects of CSS you struggle with the most)
  • What do you feel is currently missing from CSS?*
  • Other accessibility features you usually implement*
  • Browser incompatibilities (Are there any CSS features you have difficulties using because of differences between browsers?)
  • These three questions all followed the same questions asked in a multiple-choice or bracket format. As such they only capture responses not already presented as "standard" options.
[
"All applicable WCAG 2.1 AA criteria, stable selectors for user CSS overrides",
"screen reader messaging and instructions",
"windows high contrast, wcag lvl AA",
"All \"Accessibility features\". I disagree with your phrasing of these a11y questions, the way you phrase it makes them seem optional. If a developer doesn't do these things they are a bad developer.",
"content remains accessible with no-js by default",
"Readable copy, limited jargon, inclusive imagery and content. ",
"Text resize",
"Compliance with WCAG 2.1 AA",
"Screenreader support",
"Perhaps I'm mixing contexts for this survey, but I work a lot with video so captions, subtitles and alternate audio.",
"-",
"Focus traps (modal), typical components that don't have native HTML implementation (modal, custom select, etc.)",
"Skip links for things like Twitter feeds",
"adjustable font size",
"I18N\nBandwidth-conserving code\nText labels included with icons\nLess resource-intensive apps/websites",
"Dragon, screen magnifier, zoom",
"...",
"No",
"rem based CSS units",
"Progressive enhancement with no-JS fallbacks.",
"-",
"none",
"None",
"I use a11y.js to provide different styles for keyboard focus.",
"aria-live",
"alt attributes!",
"Form Validation (for example with the required attribute).",
"we try and test with screen readers",
"focus trapping for modals",
"Performance is accessibility too!",
"Works with screen reader",
"prefers-color-scheme",
"Scroll bars (yes, it’s a thing that some apps don’t have any even though they should)",
"Settings for changing the layout of the interface",
"Hidden text for screen readers",
"Video transcripts",
"is it visible for people who are far-sighted and/or have eye fatigue from looking at screens all day. is it intuitive.",
" ",
"Progressive enhancement",
"Testing",
"Not sure",
"Everything that's necessary for WCAG 2 level AA",
"Trying to make my work at least WCAG AA compliant.",
"Landmarks\nHeadings\n",
"-",
"I wish accessibility specifications were in the specs at my job.",
"Logical ordering, programmatically available text and labels, readable form errors, responsiveness",
"Nothing",
"None",
"Plain language, unique anchor text, logical heading structure, appropriate input types",
"N/A",
"keyboard trap für Dialoge",
"focus lock",
"Screenreader testing (NVDA)",
"content-visibility",
"Focus traps",
"-",
"Appropriate focus handling (programmatically moving focus, retaining focus inside custom modal dialogs, etc)",
"Respecting user font scaling, voice navigation considerations (e.g., WCAG SC 2.5.3 Label in Name), bandwidth limitations (e.g., prefers-reduced-data; data access is also an accessibility issue!)",
"-",
"NA",
"Not exactly feature. But discussed best DOM order to ensure most usable screen reader flow with UX designers.",
"Reflow",
"Focus management (such as when a dialogue is open). ",
"Simple copywriting",
"Text-to-speech",
"N/A",
"Magnification, text zoom, different input modalities, experience on screen reader, narration etc",
"-",
"Text-align: left, rather than centered paragraphs (for dyslexia)",
"role attributes",
"rem for text size. whatever that falls under.",
"small payloads",
"I should really have more accessibility lol",
"microformats jsonld",
"Visually hidden content for screen readers \"Learn more <span class=\"access\">about XYZ</span>\"",
"None",
"autocomplete form fields",
"Screen reader only/visually hidden text/. WCAG compliant components via JS (i.e. dialogs, etc). Uses of aria-labelledby/describedby HTML attributes for things such as hint and error text.",
"Performance",
"null",
".",
"N/a",
"Linters",
"WCAG 2.1 AA compliance",
"Zoom support up to 400%",
"none",
"-",
"Scaling-friendly layouts. Layouts that scale well and accommodate for weird screen ratios.",
"None",
"accessibility menu (nav) - jump to nav, jump to content",
"none",
"Live region declaration"
]
[
"gap and grids for a while",
"Push notifications in iOS",
"gap",
"gap (Flexbox)",
"Not much anymore.",
"Form defaults (most especially Safari) A lot of junk can be avoided if we can style native forms and not rewrite functionality.",
"not anymore",
"@container",
"Email - everything breaks in OUtlook",
"Custom Properties, adoptedstylsheet (in shadow dom)",
"@supports selector()",
"Flexbox gap, line-clamp, sub-grid… I'm sure there's more.",
"position sticky, viewport units",
"Yes, each of the primary three browsers has their fair share of peculiarities. For example, Safari makes drop-caps simple with the initial-letter property, whereas Firefox and Chrome require tedious work-arounds that aren't even the same due to font-sizing differences between the rendering engines. But Firefox and Chrome usually gain features long before Safari gets them. At the same time, Firefox generally sucks at colors (doesn't handle gamma correctly). Chrome has annoying bugs when the background image is attached and so on.",
"vh unit, email writing",
"Safari imcompatibilities",
"backdrop-filter",
"Subgrid, Container Queries",
"subgrid",
"avif, @propery, gap etc",
"Gap for flex, because of Safari",
"virtually any modern css for the IE",
"tons, as i still have to support IE11 & Safari",
"I have more and more instances where stuff works everywhere but not in Safari.\nhttps://httptoolkit.tech/blog/safari-is-killing-the-web/",
"much less than in the past, not a real issue anymore",
"not anymore, we stopped supporting IE",
"Safari being slow on focus-visible, flex gap and several more is a major pain point for using new CSS. Particularly as clients use iOS devices and Safari is the only browser on iOS",
"vh on mobile",
"display: contents; is a great feature for many use cases, but it eliminates all child elements from the accessibility tree due to its implementation. Makes it entirely unusable.",
"I still have to support IE11. So pretty much everything cool, I can’t use. ",
"flexbox gap",
"font-smoothing, line-clamp, flex + min-height",
"Flex gap, damn you Safari!",
"Yes",
"vh, vw",
"Safari is the main problem",
"subgrid",
"aspect-ratio",
"Full screen height is a pain to work with in Safari",
"yes, anything not supported by IE",
"Flexbox Gap, Grid",
"backdrop-filter",
"Anything not supported by IE is a pain.",
"Anything that Firefox and Chrome support but Safari doesn't. It's a pain having to account for Apple's low bar.",
"I work in email so yes",
"safari",
"filters",
"All the cool new features.",
"default font sizes in Firefox seem to be different than Chrome and Safari.",
"-webkit-text-stroke in combination with paint-order, damn you chrome!",
"Still have been held back by IE11, but that ends soon. (Safari though...)",
"Some newer css functions, custom text underlines and typography options",
"CSS Grid, varied support for various media queries",
"Far fewer than there used to be. We’re living in a golden age. ",
"Safari",
"CSS Subgrid",
"grid gaps",
"IE 11 flexbugs",
"Anything Safari doesn't want to implement",
"aspect-ratio",
"aspect-ratio",
"Width of wrapped flex box with flex direction column\nFocus-visible on safari",
"Safari is just weird a lot",
"gap",
"focus-visible pseudoclass, flexbox gap, Houdini API",
"Too many to list for Safari on iOS/ipadOS",
"Differences, no. Support, yes. Generally everything I need has support in all browsers except for IE11.",
"-",
"content-visibility, backdrop-filter, scrollbar-width, scrollbar-color",
"Only lacking/lagging support in Safari",
"flex gap",
"line-clamp",
"Safari in general has issues with standards implementation",
"Gap in flexbox\nline-clamp with children elements",
"New colour spaces (like p3), flex gap, ::marker",
"flexbox",
"yes",
"CSS Grid",
"It's getting much better year in year out with evergreen browsers.",
"Yes, specifically compatibility with Safari",
"safari is evil",
"Any new feature until its 2 years old lol",
"focus (style), layout, sizing (width and height)",
"mostly things that safari is catching up on ",
"flexbox gap comes to mind",
"flex gap",
"yes...",
"button sizes on Safari (specially when rounded)",
"Subgrid, Houdini",
"I hate Safari with a passion of a thousand burning suns.",
"Line clamp\n\nOverflow: overlay",
"People who's hate utilities class should be burn with the anger of thousand suns",
"100% viewport width",
"scroll-snap-*, scroll-behavior, scrollbar customization",
"Legacy column gap support w/o nth-child bloat. Masonry layouts.",
"Grid, CSS variables and many more ... we need mostly to support IE11 :(",
"As much as I love grid, it's still finicky with safari sometimes",
"All of CSS with Safari. Notch specially",
"Subgrid, Container Queries",
"Writing mode bt lr",
"Flex gap :( it's so good but Safari is the new IE. ",
"not anymore",
"No subgrid support outside of Firefox can make some grid layouts hard to achieve.\nThe way gap was implemented without a flex-gap alias made it impossible for me to use it (as it's a partial implementation, @supports says it's valid when it isn't)",
"gap on flexbox",
"gap (not in grid), ellipsis ",
"Newer features that are not working in IE. ",
"Styling form elements",
"Yes.",
"backdrop-filter",
"backdrop-filter still hidden behind flags in firefox\ngap for flexbox still very new in safari (but I don't care, lol)",
"Grid, and usually the \"latest and greatest\" stuff.",
"flexbox gap, backdrop blur filter,",
"image-rendering",
"Grid and subgrid. Aspect ratio.",
"CSS-grid",
"Why is Safari so crap? Why on earth do I still have discussions about IE11?",
"sometimes Safari plays wrong with grid, flex and borders combined together",
"backdrop-filter on firefox\n",
"i use css utility, so i dont really mind much about cross browser",
"Any of the more modern features that do not work on older browsers",
"Shorthands for logical properties",
"scrollbars and clip-text ",
"fit-content, masks",
"CSS Grid, Scroll snapping, position: sticky, Scroll behavior (Need to support Chrome 49)",
"Scroll bar styling",
"Gap support for flex",
"Subgrid, container queries",
"{ scroll-behavior: smooth; }",
"The default focus state being different in different browsers.",
"gap for flex box and padding/margin-inline/block in safari",
"Almost all new features can't be implemented because of IE11 not having support.",
"no",
"Subgrid!",
"Subgrid, gap, onkeypress (and similar), container queries",
"subgrid, backdrop-filter",
"mask-image, flex-gap, box-decoration-break, shape-outside, Hyphenation, clip-path",
"ios safari: vh and scroll behavior are always trouble",
"perspective",
"The forms, Detail and summary packs, subgrid",
"Flexbox gap",
"Flex gap, logical properties",
"in the beginning, yes. now, no.",
"Safari in iPhone it isn't capable of scroll smooth :-(",
"Safari occasionally causes headaches. Stopped supporting IE-old when my last client finally stopped using it.",
"grid, flexbox gap, subgrid, Container queries",
"The other day I noticed grid didn't layout the elements as expected on my iPad in edge and chrome",
"I don't know many CSS features to even have difficulties with.",
"Nested CSS",
"focus-visible ",
"grid\n",
"Mostly for lack of support: css subgrid for example.",
"Gap in Flexbox",
"Flex gap",
"1. Can't use viewport units easily, because of Safari's changes. Safari now has safe areas which take extra time to set up.\n\n2. Edge/Chrome and Safari do not support subgrid yet.",
"Subgrid",
"subgrid",
"aspect-ratio, clamp, container",
"position: sticky; on a table column doesn't work on Samsung Internet.",
"native masonry grid",
"Not any specific at the top of my head, but usually Safari is the one giving me a hard time :(",
"subgrid (!!!), flex gap, smooth scroll",
"Houdini, fonts",
"Custom Scrollbars",
"logical properties, flexbox gap (although as far as I know, they're both getting there..)",
"Yes, every now and again.",
"Tons of them",
"flex-gap\npadding-block\npadding-inline\ncontainer queries\n:focus-visible",
"color function, lh and rlh units",
"no",
"No",
"Nope :)",
"I avoid newer features because I don't mess with polyfills",
"gap+flex",
"Flex gap (Safari), scrollbar styling (mainly Firefox, but none are great), subgrid (Chromium/Safari), 100vh (Safari, now seemingly everything).",
"-",
"Flex, Grid",
"CSS features unsupported in IE11 or lower.",
"Grid animation, scale ",
"I still have to support IE11...",
"Последние разработки в области CSS.",
"\"gap\" property for flexbox, CSS grid, some more exotic grid features, the :focus-visible selector!",
"Grid on huttons",
"Mobile: 100vh",
"none",
"subgrid. Thats not really supported anywhere except for Firefox. ",
"Container queries, font alignment",
"scroll-behavior: smooth",
"SVG and CSS filters are quite buggy across browsers.",
":focus-visible",
"sub-grid",
"Subgrid",
"webp needs to come to safari\nmodern image formats ",
"backdrop-filter",
"hyphens (weird or no support at all), aspect-ratio and subgrid (both do not have enough support across the browser landscape, yet).",
"grid",
"Backdrop-filter",
"Yes, gradient text: https://cssgradient.io/blog/css-gradient-text/",
"Chrome, Firefox, PLEASE fix your auto-height discrepancies. Tired of stuff collapsing to a single pixel tall. ",
"flexbox gap",
"flexbox and Safari do not always get along as well as flexbox + any other browser (IE excluded), also multiple background gradients look quite bad on Safari where it looks fine on Chrome, FF, Edge, and even IE (may have been fixed though, was some year ago I last checked).",
"flexbox",
"subgrid",
"Still supporting IE11 so there is a lot :(. \n\nOur support due to end this week so looking forward to a brighter future.",
"Anything Chrome implements ahead of the spec, as well as Safari severely lagging behind other major browsers.",
"Flexbox",
"Color, grid",
"flex (flex-end vs end, gap etc...) mostly. Overall things are way better now!",
"Safari in general. That's where most of the hacks are needed.",
"Not anymore, my team was just able to officially drop support for IE so we have a much more level playing field. We sadly resort to a browser sniff message to upgrade rather than provide sensible fallbacks, but I'll take the wins where I can get them in a LARGE org.",
"placeholders, clip-path, font",
"Grid, clamp, min, max, basically anything that IE11 doesn't support",
"I can’t recall something specific at the moment, but there’s always something. At the same time, I think cross-browser issues are less painful now than they used to be 15 or 20 years ago.",
"filters and certain types of spacing - gaps for example",
"aspect-ratio",
"Grid and everything newer that doesn't work in IE11",
"Too many!",
"CSS Grid, background blur",
"safari",
"Safari and iOS browsers",
"perspective, translate, rotate, scale, :focus-visible, ::backdrop, overflow: hidden on :root",
"Ja",
"position-sticky, form elements styling",
"I hate Safari.",
"line-clamp",
"background-position: fixed (Safari iOS)",
"Not since we all decided to stop supporting IE11",
"not yet, actually not using anything that isn't fully compatible (container queries, layer and that kind of stuff)",
"Are you kidding me?",
"Любые новые фичи",
"between firefox and chrome",
"Grid",
"CSS columns is a great thing, but so different between browsers. They don't seem to care for it",
"Flexbox gap, backdrop-filter, appearance, vh",
"Many - due to IE 11 support",
"Styling the scrollbar",
"Subgrid\nScrollbars",
"Range sliders, subgrid",
"grid, min, max, clamp, object-fit",
"input, sliders, shadow dom",
"No. Native electron apps are not cross-browser, so any CSS features that work in Chrome, I can use there",
":focus-visible (no Safari support)",
"Gap in flexbox, and not being able to feature detect it",
"JAvasrcip speed",
"The styling of some native elements, like number input",
"Not so much now we've dropped full support for IE11. The newer stuff goes through to full support on browsers fairly quickly although Safari does lag.",
"The most css features are slow to reach all browsers. ",
":focus-visible",
"Just wish Safari would die already",
"background images",
"Several",
"yes",
"Paint Worklets, Flex gap",
"container queries",
"gap(flexbox), @media (hover:hover), scroll-snap",
" ",
"Aspect ratio ",
"CSS is so easy now. You can do anything now that IE6 is dead.",
"IE6",
"It's time to end vendor prefixes (which are mostly on shadow parts, now); i.e. shadow parts for common components should be standardized (accent-color is a useful start). Styling scrollbars could be more uniform. Styling <input type=\"range\"> leaves a lot to be desired (ahem, Safari not supporting stylable <datalist>). z-index on elements positioned over scroll containers in Safari is problematic. I look forward to better support for aspect-ratio, accent-color, inset (shorthand for top, left, bottom, right), subgrid, d (setting SVG path strings from CSS), container queries, and outline adhering to border-radius.",
"Scroll bars and select options.",
"gap",
"No, de momento no he tenido inconvenientes fuertes.",
"Safari... Firefox scrollbars",
"Container Query",
"Container queries ",
"flexbox gap (thanks Safari 🙄), it's only recent versions of Safari that support it.",
"flexbox",
"Positioning",
"hell yea - line-clamp, filter-backdrop, tons others",
"Everything not running in IE11",
"grid",
"close to everything related to scroll control and modern calculation (thank you IE11)",
"html5 inputs (like date)",
"I don't know exactly the features, but iOS Safari behaves a lot different than all the other browsers most of the time.",
"Firefox backdrop blur",
"Not sure",
"Scroll bar ",
"position absolute",
"overscroll-behavior",
"CSS Grid",
"subgrid",
"Anything that’s implemented differently in Safari & iOS Safari\ne.g. viewport units, flex basis, limited Houdini support",
"Any feature that is not supported in all browsers, if not, I don't use it. ",
"100vh with the new iOS browers",
"flex",
"Flex gap",
"CSS Grid, aspect-ratio, object-fit, custom properties",
"grid",
"* Subgrid\n* Houdini (especially Paint API, Typed OM, and Properties & Values)\n* container queries, scroll-based animations, orphans & widows, break-before & break-after in multi-column layouts",
"styling of default scrollbar",
"flex columns on safari",
"css variables",
"backdrop-filter\n",
"Flex gap",
"combination of \"min-height\", \"display: flex\" and \"align-items: center\" in IE11",
"Form elements",
"flexbox gap",
"Logical properties",
"CSS Paged Media\nCSS Generated Content",
"gap",
"flexbox, grid",
"grid, animations",
"All the new stuff being held back by Safari",
"Text-stroke",
"overscroll-behavior, touch-action, viewport units",
"css grid",
"Flexbox, overflow",
"flex with ie ",
"depends on the target browsers, but esp. newer ones are still problematic if you target Safari. it's getting better though.",
"clip path",
"grid",
"REMs in media queries. Damn you Safari!!",
"new features in general",
"focus-visible, flex-gap",
"subgrid",
"scroll-snap\nintrinsic-size\n",
"The vh unit on mobile.",
"We are still phasing out IE11 so until then, yes",
"Scrollbars,checkboxes and radio buttons",
"aspect-ratio, grid gap",
"Ну... все что несовместимо и имеет различия между Хром браузерами и Сафари",
"нет браузера safari на windows",
"Multi-line ellipsis, flexbox",
"Custom properties in ie11, weird differences with flexbox and grid in safari",
"Subgrid",
"Why the fuck is IE11 still relevant. It makes me mad.",
"initial-letter. ",
"Grid layout (because of IE10 and IE11), clip-path, :nth-child(): of <selector> syntax",
"flex and grid in Safari",
"line clamp",
"Grid;",
"webp",
"Making video elements go full screen. ",
"Safari flexbox",
"Custom scroll bar",
"Yes",
"IOS",
"Not uniform-ish across projects targets -> not used.",
"Flex gap",
"Now it does not difficulties. old time IE6 is difficult",
"Subgrid (only supported on Firefox), accent-color (doesn't work in Safari), contrast-color (only works in Safari with feature flags)",
"Animations are often not working correctly in Safari. Actually a lot of stuff doesn’t work correctly in Safari. For example outline + border-radius.",
"For whatever reasons, I wish Safari was quicker at implementing things. ",
"да полную доступность без особых болей можно реализовать",
"Not so much since we dropped IE11 support",
"Font inconsistencies",
"sub-grid",
"Grid",
"Subgrid, Flexbox on certain elements in Chrome",
"overflow + position: relative",
"flex, grid",
"Новые свойства из последних черновиков.",
"scroll-snap (haven't checked this lately); css grid (IE11 is going away soon); intrinsic sizes and relative units (like vh, vw) on mobiles; ::marker inconsistences",
"Scroll-Smooth",
"I'm mostly just waiting for subgrid support!",
"pseudo elements",
"overflow",
"gradient para chrome",
"Safari lacks a few features like `contain`, `flex-gap` (I know it just added recently).\nFirefox still doesn't support `theme-color` (and safari just implemented it)",
"Definitely (I still have to support IE11 from time to time 😭)",
"N/A",
"Flexboxes, Grids, new features",
"the styling of form elements ",
"- scroll-margin-top: scheint in Safari nicht immer zu funktionieren?!\n- 100vw: kein Browser-Bug, horizontale Scrollleisten nerven und erfordern JavaScript zur Lösung. Schade.",
"1) position: sticky",
"subgrid :(",
"Aspect ratio, Flex gap",
"Scrollbars, input fields",
"viewport units",
"I plan to learn subgrid, which is currently supported only in firefox dev browser",
"Not as much as back when people cared about IE, but I usually wait before using new features, so never tried subgrid etc.",
"focus-visible with border-radius (Safari)",
"Sub-grid",
"yea, loads, mostly because of safari - like gap or ::marker",
"webkit",
"grid and other new features because of IE11 support",
"Some aspects of grid.",
"Sticky",
"Custom select, scrollbar",
"It's not so much difference between browsers but rather the users' browser which might not be up to date, or they can only use an old one, etc.",
"details",
"Viewport units",
"grid",
"Constructible Stylesheets, adoptedStylesheets, CSS Module Scripts",
"scroll",
"Subgrid!!",
"position: sticky",
"form inputs",
"Flexbox gap, styling scrollbars, list bullet styles",
"Logical properties and the newest pseudo-selectors (:has, :is, :where)",
":focus-visible implementation in Apple browsers, the fact that for security/privacy reasons some browsers don't expose (on first load) if a text input field has been prefilled by the browser or not, some odd Safari quirks (also related to when focus JS events are fired for form fields/controls, because Safari wants to maintain the \"native macOS\" type paradigm where focus isn't actually moved to a control if you click on it with the mouse, etc)",
"Just all of Safari.",
"Generally speaking, styling native form controls is still a huge pain point.",
"container queries",
"Fewer and fewer ",
"Layout",
"Scrollbars, Details-Tag-Designing",
"-",
"Yes: aspect-ratio, prefers-reduced-data",
"Subgrid, Initial Letter, CSS Exclusions.",
"Flex gap (just need more time for that though)",
"flex; grid; srcset",
"No",
"Subgrid",
"Don't have any particular CSS features in mind, but the slow lifecycle of Safari releases (one major version by year) is a real pain to adopt some features right away. For example, if the container queries feature was implemented in most browsers right of tomorrow or next months, we would still hardly imagine use this feature before 2 or 3 years as in my company we have a \"last two major version\" compatibility policy. ",
"Flex gap not working in older versions of Safari.",
"Yeah Safari is killing me, it's the new IE!",
"Nope",
"CSS Houdini properties",
"subgrid support... please.",
"Previously was gap, position: sticky, and anything around container queries. But need to retest what's the support is like now myself.",
"outline property behaves differently Firefox and Chrome",
"line-clamp",
"Styling the scroll bar, flex gap, accent-color",
"Scrollbar styling, input type styling",
"clamp",
"Dropdowns and scrollbars",
"Backdrop filter",
"Line clamp",
"No como antes",
"backdrop-filter, 100vh in mobile",
"Yes, lots. People keep requiring IE",
"Флексы, гриды, разное поведение свойств типа max-content",
"Fit-content",
"flex-gap",
"Containment, container queries, content visibility, css gap, subgrid ",
"Now that safari has flex gap, not really",
"CSS variables, position sticky, CSS grid, etc. (Job requires IE 11 support)",
"Nothing in modern browsers but IE11 is dead so I'm good now.",
"subgri",
"backdrop-filter, dialog, line-clamp, input timedate,",
"Size of images",
"Hr, subgrid, scroll snap, backdrop filter blur. ",
"Subgrid ",
"Glassmorphism effect via background support in Firefox",
"Chrome Dev Tools is better to use but Safari's looks nicer. Me vain.",
"Clip-path for video... Container queries need to arrive and be common already!!",
"Subgrid",
"Bugs in Safari related to shadow DOM.",
"flexbox gap",
"bleeding-edge features and things that don't work in Safari",
"CSS Variables (Custom Properties)",
"(flexbox-)gap with his false positive with @support on Safari...",
"flexbox gap \nposition:sticky with overflow-x:hidden",
"Custom scroll bar",
"Scrollbars",
"100vh in Safari iOS",
"aspect-ratio, gap, new logical properties",
"fit-content",
"flex-gap, aspect-ratio",
"CSS grid (mainly because of IE11)",
"autocomplete input styling, aspect-ratio, inset",
"The most recent ones but usually not for long.",
"Yes",
"No",
"@supports (only with pain, e.g. in IE11), some more",
"styling inconsitencies",
"gap",
"Some common \"box-model issues\" and incompatibilities in Safari",
"Yep, Safari is the new IE regarding grid and flexbox issues",
"position: sticky, scroll snap",
"Can't name specifics but it is always Safari, it is the new and improved IE",
"the marker element on UL html elements don't respond well to margin auto ",
"-",
"gap in flexbox",
"CSS grid with IE11,\n",
"Yes, none that specifically come to mind but it's usually something Safari supports and others browsers don't or the other way around.",
"gap property for Flexbox, Custom properties, Grid Layout",
"Chrome releasing experimental features (some of which are mentioned in this survey) with hardly any specifications is detrimental to the Web. It's basically the new IE: you support a majority of the user base but with non-standard features. All experimental properties should be behind a flag.",
"In 2021, there is practically no such thing.",
"Scroll bar",
"aspect-ratio",
"filters and backdrops\ngrid animations",
"Subgrid",
"Yes",
"outlines, safari",
"Safari",
"Scrollbar customisation",
"gradient with alpha 0 (Safari bug)",
"flex, grid, custom properties",
"Viewport height/width (100vh/100vw being different on macOS vs. Windows, or different between mobile versus desktop)",
"subgrid, aspect-ratio, color-contrast",
"aspect-ratio, SVG styling",
"Grid and other intricacies of grid and the way it behaves in different browsers is a pain and thus building a design system completely on the grid becomes a little tough. Also flex box in general is an easier concept to build upon and aids in design where a lot of sizing is unexpected (e-commerce websites)",
"CSS Grid, CSS Filters",
"Yes, it's very hard to write CSS while trying to support browsers like Mosaic. ;P",
"Yes, horrible Safari support",
"object-fit",
"Anything IE",
"aspect-ratio",
"scroll-behavior not working on Safari is problematic. Generally Safari is the browser to check now if something might not be supported",
"aspect-ratio",
"Grid",
"grid gaps",
"flexbox gap",
"filters and blend-modes",
"@media print",
"Subgrid",
"Sometimes properties related to forms.",
"display: contents;",
"subgrid",
"Container queries",
"Firefox's details:before behavior is wonky",
"safari",
"Microsoft continues to kill me on this front, even since Edge edged out Explorer.",
"Safari lagged behind for years but I think they have caught up. Also, Edge is REALLY good nowadays",
"line-clamp, gap (flexbox), subgrid, date-pickers (safari), fixed elements with scrollable regions (safari on iOS)",
"Container Queries",
"Anything ie11",
"background: linear-gradient (causes flashing on safari & sometimes firefox)",
"backdrop-filter: blur(), Safari in general about 1/3 the time. flex gap",
"aspect-ratio",
"I don't work on anything other than Chrome, luckily.",
"yup",
"CSS Animation, Visibility, Object-fit",
"not for day-to-day stuff... just the occasional filter or something",
"scrollbars",
"scrollbar pseudo classes, backdrop-filter, input/select tag padding differs across browsers",
"100 vh на мобилках (ios vs android), анимации (в Safari всегда проблемы), стилизация скроллбаров, плейсхолдеров, маркеров списка. IE нужно вообще истребить.",
"vw due to calculations involving the scrollbar, acting on scroll event involving a position: sticky element",
"flexbox gap, subgrid",
"No.",
"Anything not supported in IE11",
"Form controls, scrollbars",
"outline, browser navigation",
"Safari is usually a problem, unfortunately. Though much more rare than the old days of IE 9-11",
"Safari sucks",
"options for element.scrollIntoView() are not supported in Safari, a bunch of others, but that's the most recent.",
"flex, grid",
"Safari is always years behind Edge/Chrome and has many many many bugs related to viewheight/scroll. iOS Safari is the biggest limiting factor in all web development.",
"Internet Explore",
"edge",
"Mostly layouts when dealing with IE11 and older iOS Safari and Samsung Browser versions (flex gap, grid, clamp)",
"Flex Gap, Flex basis",
"Grid, custom properties",
"scroll-snap, aspect-ratio",
"Gap in flexbox, behavior smooth",
"Svg fonts, backdrop filter & some inconsistencies like outline and shadows",
"Grid, max-content, min-content, scrollbar customization, object-fit, subgrid, ::marker, resize, masonry templates",
"subgrid, focus-visible",
"Yes, one browser to rule them all is long overdue\n",
"Aspect ratio, is(), pseudo elements on slotted children",
"focus, focus-within - SAFARI MacOS in general",
"aspect-ratio",
"aspect-ratio",
"The state of the browser market is the best it’s been. Yes, there are frustrations but very few show stoppers. Getting @container support every around the same time is going to be important. Sub-grid would be nice too.",
"Subgrid is currently only supported in Firefox while other browsers are quiet on the subject",
"backdrop-filter: blur is still not usable because of Firefox",
"container query",
"aspect-ratio,100vh on iOS",
"grid",
"Layout and controlling page breaks in print media",
"aspect-ratio, fit-content",
"focus outline",
"Shadows in safari",
"null",
"No",
"Safari is a bitch when it comes to some specific integration, but nowadays cross-browser compatibility is at a really good state overall",
"Glassmorphism (backdrop-filter) - Firefox :(",
"I was fucking supporting IE11 till one month ago so almost everything!",
"only older browsers",
"backdrop-filter: blur; and display: flex: in combination with gap",
"Inputs",
"ruby",
"Handy layout and grids without pain in the ass.",
"masonry grid, only FF supports it :(",
"flex-gap, focus-visible",
"I haven't encountered this problem lately",
"Новые фичи, типа @supports, contain, grids",
":focus-visible",
"Styling scrollbars, checkboxes",
"flex-gap",
"Overflow in safari when implementing scroll",
"backdrop-filter",
"overscroll-behavior, scroll-behavior, contain, scroll-snap-stop, display: contents, subgrid, :where(), :is() (poor/late support, especially in Safari), clip-path (Webkit bug)",
"grid",
"IE 11 is a pain. Businesses are not quick to adopt new browsers, even with the IE userbase often being less than 1%.",
"input data types, and default validation of the forms",
"Grid and flexbox are still a major concern for me",
"Safari has annoying display issues with \nhyphens: auto; / -webkit-hyphens: auto; when a parent element has \nword-break: break-word; / overflow-wrap: break-word; set",
"Grid, flexbox",
"radius in old browers",
"Слишком много вопросов, бесит",
"aspect-ratio",
"too many",
"Grid, newer stuff you mentioned earlier",
"Filter, Flex gap",
"vh unit",
"gap flex-box in Safari is only supported in latest versions",
"grid and css vars in IE, though thankfully IE is finally going away",
"-",
"filter\nbox-shadow\n...",
"scroll snap in safari does not work well",
"Yes",
"grid, gap, form inputs",
"Gap,filter",
"Safari",
"Inconsistent font-weight rendering in Firefox. Better compatability with CSS grid in IE11.",
"-",
"Grid, CSS Variable",
"subgrid",
"Media Queries",
"position: sticky can be really annoying to make work between browsers in some contexts",
"pixels freak me out, never use pixels. (px)",
"styling :focus is an issue in Safari",
"flex gap",
"No not really since we have dropped support for ie11.",
"flex is usually wonky in Safari",
"flex-gap in ie11",
"CSS Variables, Grid",
"canvas webgl",
"Gap",
"Input styles and table cell size control",
"None at the moment, with aspect-ratio supported recently on Safari.",
":focus-visible",
"Houdini",
"Masks, svg animations",
"backdrop-filter",
"Can't remember any right now",
"Gap property for flex",
"Yes ",
"Yes. Some clients still use IE11, which limits the amount of new CSS features that I use in a professional setting",
"Safari feels pretty behind the times most of the time",
"scrollbar styles",
"constructable stylesheets",
"Opacity on safari",
"Grid, aspect-ratio",
"CSS sub-grid",
"Grid",
":has, also seems like position: sticky still has problems in Safari",
"It’s not too bad in 2021. ",
"Gap",
"mix-blend-mode, backdrop-filter",
"flex, grid",
"aspect-ratio",
"all the new commands that still have a low browser compatibility",
"Yes! Mostly CSS Grid and flex",
"The Safari team should put their head out of their arse - Safari, Especially iOS Safari, are such a pain to work with as a webdeveloper, they lag years behind on too many features for both CSS & JS.",
"Viewport Height, Screen Height",
"Aspect ratio doesn’t have great support on safari previous editions ",
"Autoprefixer is godsend but I still hate we have to do things like that ",
"CSS variables which aren't supported in IE11",
"Overflow",
"Aspect-ratio sur Safari ",
"Safari and apple in general have incompatibility because they are late",
"aspect-ratio",
"grid",
"CSS Grid",
"Some css properties handle strangely in Safari",
"focus/active indicators",
"css variables, scroll-behavior, object-fit",
"aspect-ratio, CSS funcitons",
"Flexbox gap",
"Yes - and Safari is nearly always the browser that gets it wrong.",
"Flex gap, proper line height measurement (a proposal by Microsoft), tooltip / popup / dropdown / popover which still doesn't really exists",
"aspect-ratio",
"subgrid, container queries, flex-gap",
"Yes, now I can't remember",
"Constructable Stylesheets",
"Адаптивные изображения",
"Flexbox gap, :focus-visible (no support in Safari)",
"backdrop-filter",
"IE make me angry",
"sticky",
"Smooth scroll on safari",
"older browser grid / flexbox support",
"scroll bars",
"Cutting edge CSS features, which is (part) of the reason I avoid them :/",
"New features",
"CSS grid",
"Not many but it's annoying when it happens. It's usually Safari lagging behind or rendering random stuff instead of the UI specified.",
"backdrop-filter: blur() [Firefox not supported]",
"aspect-ratio",
"aspect-ratio",
"When uploading, events in FF are fired in a different order compared to Chrome & Safari.",
"Scrollbars, select, keyboards (desktop vs ios vs android)",
"position sticky, background filter",
"Form elements, scrollbars and other 'blackbox' things",
"gap property for Flexbox, CSS Logical Properties",
"backdrop-filter",
"backdrop filter",
"the gap properties often behave differently from browser to browser ",
"100 vh on mobile, because of addressbar hiding and virtual keyboards behaving differently",
"Most recent css that aren't supported on all versions of the browsers we support\n",
"anything newer than grid",
"backdrop",
"Styling layout and shadow DOM across different browsers can be challenging. As far as modern web development goes, Safari is the biggest offender - features and fixes consistently lag behind Chromium- and Gecko-based browsers.",
"Sub-grid, scrollbars",
"aspect-ratio, webp, avif, logical properties",
"backdrop-filter",
"aspect-ration, flexbox gap",
"Overflow",
"Safari sucks",
"Sub-grid",
"flex gap",
"Nothing major, much better than IE 6+ era. Currently Only Safari that sometimes behave differently.",
"Many technologies blocked by lack of Safari support",
"Flex",
"flexbox gap, :is(), multi-column, dialog, overscroll-behavior, :focus-visible, filter()",
"new properties like flebox gap, etc",
"aspect-ratio (Safari). weird object-fit<->JS troubles, subgrid (FF only), anti-Houdini",
"Pretty much anything modern, as Safari is lagging behind.",
"Not currently but it's primarily due to my company not supported IE anymore. But I recall hating the grid usage across browsers since it was supported, but different syntaxes. I'd almost rather it NOT support at that point.",
"custom selects/checkboxes styling",
"Every new feature",
"backdrop-filter",
"/",
"Since we are still supporting IE11 where I work, yes, I can't think of any off the top of my head right now though",
"flexbox gap",
"Gap (flex)",
"min(), position: sticky",
"Gap in a flex-box doesn't work on Safari.",
"Safari became the new Internet Explorer fro us",
"focus-visible",
"The <select> tag is still hard to customize",
"subgrid",
"Safari, FF",
"Grid, gap, logical properties, css vars, Houdini (IE11+emails are the worst offenders)",
"flexbox",
"viewport units, flex",
"IE11",
"Subgrid!!!!! And container queries.",
"Chrome has started falling behind here and it’s been weird. The part where only Firefox will implement things to-spec and then has to back them out because of compat issues is also gotten frustrating, since the spec version is usually better: for example, vw units respecting the scrollbar if overflow is set correctly, which Chrome never implemented",
"SVG rendering and mostly their coordinates and transforms",
"New stuff, used to be limited by IE11 now is limited by Safari. Wish I could use more current css, but can't.",
"none",
"Flexbox Gap",
"aspect ratio!",
"гриды, стандартные шрифты и базовые элементы, типа кнопок.\n\nПриходится всегда применять reset.css, который скидывает все нативные стили браузеров",
"CSS filters with large animated content",
"Every browser should be webkit based and Apple should get in line and update Safari regularly.",
"it changes all the time",
"Firefox does not support backdrop-filter",
"CSS Scroll Snap with Element.scrollTop in Safari",
"flexbox, overflow: scroll",
"If I don't have to support <= IE11 I'm good",
"Firefox and Brave",
"very annoying ",
"flexbox gap; subgrid",
"Not really, SASS and polyfills solve most problems",
"no :)",
"masking",
"flex and grid on ie11, but i don't support that browser anymore",
"Inputs",
".",
"subgrid",
"Scoped css",
"No"
]
[
"Half-baked support (grid without subgrid, flex without gap, position sticky with overflow, etc.)",
"tailwind covers all of these. i don’t struggle with them",
"Email - evertthing breaks in Outlook",
"Safari on iOS :D",
"Safari",
"Very dependent if you are using a library or not to be honest. ",
"mobile safari in general",
"HTML und CSS sind zu separiert. Ich vermisse IDE-Funktionen wie „Klassennamen im HTML und CSS umbenennen“ oder „Zu Stellen springen, an denen Klasse xy verwendet wird“.\n\nI think HTML and CSS are too separated. I‘m missing IDE Features like „rename class in HTML and CSS“ or „goto other references of this class“.",
"The ongoing efforts to industrialise CSS in order to conform more with the industrialised JavaScript Dichotomy of WebApps vs Websites. It's damaging and it further perpetuates the narrative that the web platform needs to serve corporate interests and developer interests only, when the technology of the platform has its quirks because it assumes all participants of the web need to have access to the knowledge and tools to make websites. Even scoping and modularisation was implemented first in css-module-scripts, not with the scoping spec. JavaScript is eating CSS, and this also means that Software Development is eating the \"Web Document\" Web.",
"Sticky position only works when the parent doesn't have overflow hidden and it's really limiting and hard to get around this issue.",
"Bundling, packaging, imports",
"Translating between Figma and a CSS design system. Figma should have been built on HTML/CSS and not a custom WebGL renderer.",
"-",
"The small but plentiful design decisions we have to make between design handoff and writing css. Especially for the portrait tablet size. Desigers often design for mobile and for desktop and neglect tablet.\n\nUsing Grid for unknown content (such as from a CMS wysiwyg)\n\nNo ability to do grid-row: 1 / -1 for implicit grids.",
"Safari",
"Having to deal with crappy HTML to begin with",
"It's both style & layout when it's only supposed to be used for style",
"The bracketing above is not consistent with every project.",
"CSS-in-JS. Modern style resets. Increased need for math and logic for advanced responsive layouts.",
"Safari",
"culture wars",
"With external libraries taking care of components, it's hard to have various overriding styles and making components WCAG-compliant. ",
"None of the points you listed cause me much of a struggle",
"using BEM approach(naming part).",
"Still no nesting, custom media queries",
"Consistency of styles.",
"Picking a technique, Following OS-specific styles or animations, Overriding poor default styles",
"Variables (not being able to use them for media queries; not being able to apply alpha to and rgb variable); @supports (which isn't always supported, especially for properties); selecting a parent; selecting every nth element dynamically (instead of writing 2, 4, 6, just writing n*2 for example)",
"Debugging stacking contexts",
"gracefully degradation and working in a complex pre built environment like WordPress with Elementor and other plugins",
"...",
"lack of container queries",
"100vh not equaling the height of the browser window thanks to changes made in iOS Safari. This can now be mitigated through env() and the safe area variables, but it's a lot of extra work.\n\nLack of support for subgrid means more work trying to lay everything out.",
"Email Templates Styling",
"large scale projects\nlong term big projects evolution with huge amount of css",
"Styling form elements\n",
"So many haha",
"none",
"Container queries will solve a lot of current pain points around component-led frontend architectures. Ditto Cascade Layers.",
"-",
"Safari",
"none",
"browser support for new functions",
"I learned CSS before the explosion of new abilities since CSS3 and HTML5. Originally it was a design goal of CSS to be easy to learn. I don’t think that’s true any more. :( \n\nI don’t think it would solve the issue, but one thing I do wish had happened differently is that specifying some values seems weirdly inconsistent. For example, why do the alpha values in color functions have to be between 0 and 1, when we could just use a percentage (like we do with most other values)?\n\nAlso, I am glad to see most of the transform functions beginning to become available as standalone properties. I think it should have started this way, then offered the weirder functional syntax if we needed it for whatever reason. The standalone syntax doesn’t have great support yet, though, so...still a pain point.\n\nOh, and no native syntax for nesting selectors! I know they’re working on it. But that one has been a LONG time coming. I hope browser support doesn’t drag its feet once that CSS module has been approved!",
"z-index",
"SCSS @use ",
"Safari and iOS chrome",
"Safari",
"CSS columns",
"FORM ELEMENT STYLING!!!!!!!!!!!!",
"Recalculate Style",
"It should have nesting like Sass",
"Intrinsic Web Design",
"Naming things",
"It sucks making a website twice...for desktop, then you have to make sure it works well in other devices like phones and tablets",
"it's a trash system ",
"animation performance of many elements on same time.",
" ",
"Select input styling",
"I always want to be able to modify the alpha of colors defined in hex in custom properties. I'm hoping color functions will help with that. Storing HSL or RGB values space-separated in custom properties for use in functions later gives no IDE color support. I like and am used to working with hex color values, but want to be able to adjust them and their alpha too.",
"It's getting increasingly hard to google newer properties and find useful result. It seems like new properties are driven more by vendor needs than developer needs (for example, there are tons of new color properties nobody asked for, but we've been begging for container queries for years and they're only barely in their infancy).",
"Volume of information and scoping viability of new properties in relation to browser support",
"None",
"interaction state-based behavior for nested elements (e.g. when I hover on this child of some parent X, I want some other child of parent X to be styled like so...)",
"different systems - sometimes there's code in global css, component scoped styled-component css, and also style jsx objects, and you have to figure out where declarations are coming from",
"* Some redundant, misnamed or unclear properties & values (e.g. overflow-wrap, word-break, and white-space; align-* and justify-*)\n* Flexbox handling around flex-basis and responsive layout",
"input styling across browsers and devices",
"browser inconsistencies",
"If a develop doesn’t know CSS, they tend to make decisions which make the css even worse",
"Regression Testing",
"Balancing a11y with required designs.",
"Perf issues in Safari",
"Safari. Everything WebKit. Freaking Apple…",
"Part of the community mocking anyone saying they have difficulties doing X with CSS.",
"Safari features tied to OS, not a truly evergreen browser. Safari is the only browser choice on iOS.",
"Positioning",
"None",
"Waiting for container queries",
"N/A",
"Use of % units is not consistent. Fr units seem to work better but are limited to grid-template. ",
"Hinweis: Bei komplett selbst geschriebenen Frontends sind \"Bereiche & Spezifität\" eher ein geringes Problem. Wenn Module von Dritten Frontend-Code ausgeben und stylen, wird es schnell unangenehm. Besonders, wenn die Module älter sind und starke Selektoren nutzen.",
"Balancing design requests over writing responsible CSS.",
"Sass-specific paint point: still not being able to use @extend within a media query",
"Support for new features",
"- Global nature, cascade, source order\n- Append-only stylesheets\n- Unused styles\n- Repeated styles\n- Non-cohesive styles & magic numbers\n- Flexibility is a double-edge sword leading to one-off styles\n",
"Developers writing unnecessarily complex SASS, and CSS-in-JS.",
"webkit",
"Debugging, pointing unused/invalid css,...",
"Browsers (like Safari) being considered standard/modern but diverging too much from other standard/modern browsers, making it arduous to provide parity for.",
"I want something to be able to _link_ an overflow element to the main (browser) scrollbar without any position:fixed \"hacks\".",
"-",
"Scroll-linked animations and advanced animations",
"NA",
"styling HTML table element.",
"Debug CSS Tools",
"Mostly it's dealing codebases that wasn't written or maintained by people who understand CSS.",
"Until nesting becomes a real possibility, writing vanilla CSS seems a bit too verbose.",
"I did not like the wording of this question. Most of these toss-ups are not about struggling, but where do we spend most of our time to have good DX or UX. A team of engineers shouldn't struggle with file organization vs form element styling. That doesn't really exist at a professional level IMO.",
"Shadow DOM, CSS Parts, and web component authorship.",
"Animating SVGs is a pain in the ass because of relative units.",
"To be honest I don't struggle that much with he above. Specificity only comes into play when dealing with integration with a cms like WordPress in the block editor. Tailwind has been great to simplify/granulise (?) Things and reduced code weight and specificity.",
"N/A",
"unenthusiasm towards learning CSS by fellow developers",
"Many of the recent additions and proposals to the CSS specification are becoming overly complex in the way they implement things. A good example of this is the entirety of CSS Grid.",
"-",
"no real pains anymore.",
"- z-index (its stacking)\n- ",
"Browsers adoption",
"parent selectors",
"Slow adoption of new features",
"Still having to provide support for IE11.",
"Dealing with the lack of @supports not { } in older browsers.",
"Not intuitive for beginners. It takes time to build an arsenal of tricks.",
"Composite layers performance is voodoo magic",
"Workflows ",
"iOS viewport sizing ",
"IE 11",
"I feel recent and more advance css specs (e.g. Css grid, pseudo selectors, css funtions etc.) are getting convoluted and too specific. I find myself feeling more that either they solve a vey niche problem, or they address an issue by providing a very verbose unintuitive solution (css grid - 100 ways to write!?) ",
"Handling hover states for touch vs mouse",
"can't use vars in media query statements\ncan't (easily/understandably) manipulate color vars\nline clamp is a shitshow\n",
"CSS responsive design is such a pain.",
"None.",
"Developers not giving enough importance to CSS",
"There is no parent selector",
"Nearly all pain points are Safari.",
"Learn always the new features of CSS",
"Color and units managments",
"Browser default styles, non-nested blocks, browser supporting mess, many useless styles hard to see and purge",
"Scroll Overflow - For pop out menus, dropdowns (not using default select) etc there is currently no good way to have them overflow their scroll parent or no way that I have figured out. ",
"global name scope in vanilla CSS",
"CSS properties feel arbitrary, need to learn so much by heart instead of being able to rely on intuition or common sense",
"Safari! 😭",
"layout shift",
"Printing",
"null",
".",
"n/a",
"Отсутствие изоляции стилей из коробки",
"Main CSS pain point above all: Safari (i.e. all iOS) being rigged with bugs and lagging behind in features.",
"Explaining why certain things happen in CSS to people who don't know much about CSS.",
"none",
"CSS in JS",
"Настройка под iOS",
"-",
"CSS regions are still not a thing.",
"Testing frameworks that use CSS selectors",
"Overflow and position to parent elements",
"This falls under Layout & Positioning, but vertical alignment is my archnemesis, though flexbox has been helpful with that in some cases.",
"Animations",
"The usage and configuration if I need to use sass or not. Wish css had everything sass have by default",
"Scoping and sharing css between file and projects.",
"Missing implementations of new specs",
"CSS-selectors used without conventions and also for everything outside CSS",
"The lack of typographic control in responsive design. I can't control for widows and orphans without extensive an suboptimal solutions",
"Safari ",
"I have no idea what to do here with the items",
"CSS is bloated: too much properties and values"
]
[
"it’s actually great because tailwind",
"does email css count?",
"Dealing with dynamic wrapped properties is challenging. For example, there's no way to select on each line of text content, or when working with flex or dynamic grids (ie grids with unknown amounts of columns), there's not much you can do to select/style each line individually when it wraps onto a new line.",
"CSS Regions",
"Better support for Html to pdf",
"Print-related, like proper support for mm/cm/pt, micro typographic control, page headers / footers, etc.",
"These matchups are bad for me - my final two would be Container Queries and Browser Support. Container Queries are second only to Browser Support and this setup disadvantages them.",
"Partials / Modules inside CSS and scoped linking into the DOM without the need for the shadow dom. We'll soon be able to import stylesheets into each other as cascade layers, but yet we are still encouraged from splitting up our stylesheets, further increasing the need for css-in-js as the component-model eventually fails on the HTML layer and influencers continuously perpetuating HTML as subpar to JavaScript. Componentisation needs to happen on the entire platform and not just in as an epistemological construct in the DX. CSS is often postulated as the big roadblock here, but it is actually HTML, and to a certain degree the browser vendors, who took a hard stance first against scoped CSS and then against HTML imports. This continues to make JavaScript the only valid solution for developers working in the industrialised web, creating circular logic, in where all efforts need to go through javascript because it is the most important factor in the ecosystem.",
"Better Safari update cycle, detached from OS updates",
"Scroll animation timeline",
"Container Queries",
"Container queries",
"-",
"Masonry layout",
"Aspect Ratio",
"@layers",
"Parity between web layouts and traditional typographic standards e.g. line-height vs leading!",
"More complete math/calc() operations",
"chrome devtool with css not that really friendly and low DX.",
"OS-specific default styles and animations (kinda like SDKs per OS)",
"...",
"Don't know at the moment",
"none",
"Native support for masonry layouts in Grid. Full style support for all native HTML elements: form controls, <details>, lists, scrollbars, etc.",
"-",
"none",
"CSS Regions, wrap text on both sides of a floated element",
"XPath-like following-sibling and preceding-sibling",
"The ability to use custom properties in media queries",
"Not a feature, but we need more CSS advocacy and literacy. The increasing difficulty of learning CSS has discouraged younger web devs from bothering to learn it any more than they have to, and so they never learn to solve easy problems with CSS, instead relying on complex, fragile, and non-standard solutions that impose costs on both the development and maintenance side, as well as the client performance side.",
"Functions",
"More possibilities to design independently from HTML, for example, to create to columns, you need a wrapper element in HTML",
"Animating from 0 to auto height/max-content height",
"overflow(scroll+visible)\n- if a element like popover or tooltip in scroll box, always it was clipped. \n\nI want to\n\noverflow: scroll visible\n\noverflow-y: scroll\noverflow-x: visible",
" ",
"Partials not impacting performance in vanilla cas",
"Select input styling",
"I want to be able to declare a custom element such that global styles can leak in, while still encapsulating styles defined within the component. This is especially useful for custom elements that contain form controls. Custom properties are useful, but simply not enough. There really should be an option for open-stylable shadow roots.",
"text node selector",
"CSS already have lots of amazing drafts, just need the browser to implement them. AND MAKE SURE TO IMPLEMENT THEM PROPERLY ACCROSS BROWSER, please don't repeat the case of grid on the early days.",
"* top-layer positioning\n* responsive layout capabilities for tables\n* styling of gaps in grids, Flexbox, and multi-column layouts\n* control over margin collapsing\n* styling of dragged elements, state-dependent styling (e.g. styling of stuck, snapped, or on-screen elements)\n* carousel-like overflow scrolling",
"Scrollbar styling. Native form element styling. Native dialog element styling",
"Explicit specificity levels; more flexible calc (unit conversion, attribute-based calc); more precise font alignment (e.g. to the top pixel) ",
"Decent form element customisation",
"Но область видимости тоже хорошо бы )",
"Styling form",
"Layers",
"-",
"I'm working with SASS so mixins and color functions I use there a lot, so if I would need just to write pure CSS, sure I would miss a lot those features.",
":First-of-class, :last-of-class",
"Themes",
"Container Queries, viewport input:focus",
"None",
"Better form state pseudoclasses",
"N/A",
"Fr units across the board. Being able to styled the lines in a grid.",
"- in CSS styles definieren, wenn JavaScript deaktiviert ist - ohne den no-js-Klassen-hack. eher mit @noscript { .el {...} } oder ähnlichem.",
"Detect browser, i.e: inout type search automatically adds clear search in chrome but not on firefox",
"Container queries",
"Setting keyboard navigation to match visual display order",
"I NEED THE PARENT SELECTOR COMBINATOR CLASS!",
"conditional CSS",
"-",
"NA",
"Blurring content under an element",
"Parent selector, scoping, container queries, subgrid and mixing are all very welcome additions",
"nth-word selector",
"Nesting: Being able to nest styles in native CSS.",
"N/A",
"-",
"Вложенные стили как в scss/stylus/etc",
"select element based on its assignment to another element: i.e., select the label[for] a checkbox or element identified by div[aria-labelled-by]",
"- Non-shorthand syntax for box-shadow/text-shadow/etc \n- Multiple before/after pseudo elements instead of just one \n- The ability to select all heading tags instead of typing them all out",
"box alignment in block formatting context, masonry layout, unit math in `calc()`, `Inherit()` function and additive cascade, interpolation between breakpoints…",
"More logical operators",
"Apply styles based on content",
"More flexibility for using attr() values dynamically as prop values",
"constructable stylesheets",
"Scroll animations! Please continue to support Scroll-Timeline!",
"None.",
"Custom @media rules that can be re-used",
"better math functions, scoping, lazy loading, vertical font normalisation",
"Use cicles",
"Parent selector, scoping, prefers-reduced-data, @layers",
"Easy and minimal code lines for masonry layouts (ideal for portfolio pages, galleries, and search results)",
"null",
".",
"n/a",
"More control over scroll-snap, like the duration till the snapping; spring animations; layout animations.",
"More of a comment, I'm not sure comparing features makes a lot of sense in the way they were grouped. They seem to be each solving a specific problem that wasn't 100% related.",
"none",
"we can create any new features, but if browsers (like Safari) are waiting 3 years to implement it, it's totally useless.\nToo many \"smart features\" like calculation, nesting, container queries, etc.. are just making things too complex.\nAll the web (css preprocess, css in js, etc...) are going in the wrong direction.\nWe don't need to make things more complex, we need to simplify everything.\nExemple: we should avoid mixins, they are useless, as we have yet css-variables.\nCss in JS is just totally stupid. In this idea, we could also write an entire static html/js/css in php too... \n<?php\n echo <style>.red {color:red}</style>\n echo \"<table class='red'>\";\n echo \"<tr>\";\n echo \"<td>Name</td>\";\n echo \"<td>toto</td>\";\n echo \"</tr>\";\n echo \"</table>\";\n?>",
"-",
"-",
"nth-letter selectors!!",
":nth-child(n) so that I can reference n as variable in styles, without defining --n variable for each element.",
"Previous sibling selectors, better support for nth specific class selectors ",
"Backward-looking sibling selectors",
"Code like functionalities like cycles and conditionals like code and not with selectors that could use a class or property as conditional",
"text-wrap: balance;",
"Aspect ratio "
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment