{"id":24083365,"url":"https://github.com/mitranim/css-ideas","last_synced_at":"2026-02-17T05:02:35.822Z","repository":{"id":34294497,"uuid":"38194581","full_name":"mitranim/css-ideas","owner":"mitranim","description":"Ideas for useful features missing from the CSS spec","archived":false,"fork":false,"pushed_at":"2015-06-28T10:39:46.000Z","size":180,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-08T21:18:19.168Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mitranim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-28T10:14:42.000Z","updated_at":"2015-06-28T10:14:42.000Z","dependencies_parsed_at":"2022-09-03T01:06:31.589Z","dependency_job_id":null,"html_url":"https://github.com/mitranim/css-ideas","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mitranim/css-ideas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitranim%2Fcss-ideas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitranim%2Fcss-ideas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitranim%2Fcss-ideas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitranim%2Fcss-ideas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mitranim","download_url":"https://codeload.github.com/mitranim/css-ideas/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitranim%2Fcss-ideas/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29534471,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T05:00:25.817Z","status":"ssl_error","status_checked_at":"2026-02-17T04:57:16.126Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-09T23:56:29.543Z","updated_at":"2026-02-17T05:02:35.806Z","avatar_url":"https://github.com/mitranim.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## Description\n\nIdeas for useful features missing from the CSS spec.\n\n## Quicklinks\n\n* [`as-if`](#as-if-property)\n* [`!default`](#default-rule)\n\n## `as-if` property\n\nMakes the matched element look _as if_ it also matched the selectors listed\nin the property.\n\nSpeaking in procedural terms, the rule adds the listed selectors to the currently matched\nselector, then recalculates the element's styles. This has the potential to make\nseveral passes, adding more selectors with each pass. User agents will need to\nguard against infinite recursion by ignoring duplicates.\n\nBorrowing an example from below:\n\n```css\ninput[type=checkbox]: checked + label {\n  as-if: [theme=primary] .active;\n}\n```\n\n### Example\n\nSuppose we have a colour theme defined as follows.\n\n```css\n[theme=primary] {\n  color: blue;\n}\n[theme=primary] .active {\n  color: darkblue;\n}\n```\n\nWe might use it like so:\n\n```html\n\u003cnav theme=\"primary\"\u003e\n  \u003ca class=\"active\"\u003efirst\u003c/a\u003e\n  \u003ca\u003esecond\u003c/a\u003e\n\u003c/nav\u003e\n```\n\nSuppose we want a pair of `input[type=checkbox] + label` to take advantage of\nthe theme, so that `:checked` makes the label use the already defined `.active`\nstate.\n\n```html\n\u003cform theme=\"primary\"\u003e\n  \u003cinput checked type=\"checkbox\" id=\"1\"\u003e\u003clabel for=\"1\"\u003eI'm selected\u003c/label\u003e\n  \u003cinput type=\"checkbox\" id=\"2\"\u003e\u003clabel for=\"2\"\u003eI'm not\u003c/label\u003e\n\u003c/form\u003e\n```\n\nCurrently, you have to add an exception to the theme definition, duplicating\nthe colour:\n\n```css\n[theme=primary] {\n  input[type=checkbox]:checked + label {\n    color: darkblue;\n  }\n}\n```\n\nWith the proposal, you can make it behave _as if_ it matched the given selector\ncombination:\n\n```css\ninput[type=checkbox]: checked + label {\n  as-if: [theme=primary] .active;\n}\n```\n\nThis way, you can reuse rules in cases where duplication is otherwise\nunavoidable.\n\n### Considerations\n\n* Additive by nature: additional declarations don't override the previous ones.\n* Adding `!important` results in a \"final\" declaration that prevents further\n  additions, but doesn't remove the selectors previously added to the list.\n\n## `!default` rule\n\nSimilar to the `!default` feature in Sass. Applies the property if there isn't\nan existing rule, or if it's set to `initial`. Mutually exclusive with\n`!important`.\n\n### Example\n\nSuppose we have a rule that only works with elements that don't have their\n`display` property set to `inline`:\n\n```css\n.wide {\n  width: 100%;\n  height: 2em;\n}\n```\n\nTo apply this to an element in HTML, we need to know its `display` property\nin advance. Blindly adding a declaration like `display: block` would break\nelements with a different display property, like `display: flex`:\n\n```html\n\u003c!-- BAD: we don't know its initial display property --\u003e\n\u003csome-element class=\"wide block\"\u003e\n  \u003csome-child\u003e...\u003c/some-child\u003e\n  \u003csome-child\u003e...\u003c/some-child\u003e\n\u003c/some-element\u003e\n\n\u003cstyle\u003e\n  .block {display: block}\n\u003c/style\u003e\n```\n\nWith the proposal, we can safely specify the default without breaking elements\nwith their own rules:\n\n```css\n.wide {\n  width: 100%;\n  height: 2em;\n  display: block !default;\n}\n```\n\n```html\n\u003c!-- GOOD: the default display property, if any, is preserved --\u003e\n\u003csome-element class=\"wide\"\u003e\n  \u003csome-child\u003e...\u003c/some-child\u003e\n  \u003csome-child\u003e...\u003c/some-child\u003e\n\u003c/some-element\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitranim%2Fcss-ideas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitranim%2Fcss-ideas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitranim%2Fcss-ideas/lists"}