{"id":13825102,"url":"https://github.com/tomhodgins/element-queries-spec","last_synced_at":"2026-01-20T19:36:17.159Z","repository":{"id":152546062,"uuid":"75671400","full_name":"tomhodgins/element-queries-spec","owner":"tomhodgins","description":"A spec for a Container-Style Element Query Syntax","archived":false,"fork":false,"pushed_at":"2017-12-28T17:08:28.000Z","size":173,"stargazers_count":367,"open_issues_count":10,"forks_count":14,"subscribers_count":24,"default_branch":"gh-pages","last_synced_at":"2024-11-20T03:32:02.690Z","etag":null,"topics":["component","container","css","element","eqcss","meta-selector","module","parent","queries","query","responsive","scoped","spec"],"latest_commit_sha":null,"homepage":"https://tomhodgins.github.io/element-queries-spec/element-queries.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomhodgins.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-12-05T22:19:09.000Z","updated_at":"2024-01-21T13:44:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"68e38813-3c3f-4510-af12-a2f0b1ee6f67","html_url":"https://github.com/tomhodgins/element-queries-spec","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tomhodgins/element-queries-spec","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhodgins%2Felement-queries-spec","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhodgins%2Felement-queries-spec/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhodgins%2Felement-queries-spec/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhodgins%2Felement-queries-spec/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomhodgins","download_url":"https://codeload.github.com/tomhodgins/element-queries-spec/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhodgins%2Felement-queries-spec/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264352645,"owners_count":23594939,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["component","container","css","element","eqcss","meta-selector","module","parent","queries","query","responsive","scoped","spec"],"created_at":"2024-08-04T09:01:14.738Z","updated_at":"2026-01-20T19:36:17.153Z","avatar_url":"https://github.com/tomhodgins.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# CSS Element Queries\n\n[![CSS Standard Status](https://jonathantneal.github.io/css-db/badge/aspect-ratio.svg)](https://jonathantneal.github.io/css-db/#aspect-ratio)\n\nA spec for a container-style element query syntax in CSS\n\n**Read online:** [element-queries.html](https://tomhodgins.github.io/element-queries-spec/element-queries.html)\n\n## What is this about?\n\nThis spec aims to define a syntax for scoped styles and element queries in a container query style, as well as the related selectors, functions, and units that make scoped styles and element queries versatile and powerful way to write layout-independent responsive conditions for elements in CSS.\n\n## Proposed Syntax\n\n```css\n/* Scoped Style */\n@element div {\n  :self {\n    background: lime;\n  }\n}\n\n/* Element Query */\n@element div and (min-width: 500px) {\n  :self {\n    background: lime;\n  }\n}\n\n/* Container Query */\n@element div and (min-width: 500px) {\n  :self {\n    background: lime;\n  }\n  html {\n    background: red;\n  }\n}\n\n/* Multiple Selectors */\n@element #example-1, #example-2 {\n  :self {\n    background: lime;\n  }\n}\n\n/* Multiple Conditions */\n@element div and (min-width: 500px) and (min-characters: 5) {\n  :self {\n    background: lime;\n  }\n}\n```\n\n**View Syntax Example:** [styles.css](example/styles.css)\n\n## Plugin \u0026 Demo\n\nAs a reference for the syntax described in the spec, I have included a JavaScript plugin that reads the proposed syntax and displays the desired behaviour of the proposed functionality.\n\n**View Plugin:** [element-queries.js](plugin/element-queries.js)\n\n**View Demo:** [demo.html](demo.html)\n\n## Related Projects\n\nThere are a few projects currently working with the syntax described in this spec:\n\n- [EQCSS](https://github.com/eqcss/eqcss) Element Query CSS browser plugin\n- [eqcss-compiler](https://github.com/tomhodgins/eqcss-compiler) an EQCSS to JavaScript compiler\n\n## Further Examples\n\nMore examples of this syntax can be found on Codepen by searching for \"EQCSS\".\n\n**Search Codepen for EQCSS:** [Codepen Search](http://codepen.io/search/pens?q=eqcss\u0026limit=all\u0026type=type-pens)\n\n## Who am I?\n\nI'm an independent web developer, not affiliated with any major companies. The research \u0026 development contained in this spec is my own.\n\n## How you can help\n\nAt this stage the work on this spec is focused on taking the existing EQCSS syntax for element queries as implemented by the EQCSS project and defining them in a more formal way so that other plugin builders could design plugins or tools that work with the EQCSS syntax as implemented by EQCSS.js\n\nIn the future once the first version of this document is complete, there will be an opportunity to extend the features described.\n\nFor now, the most productive way to provide input would be by contributing to the conversation in the [Gitter chat room for the EQCSS project](https://gitter.im/eqcss/eqcss)\n\n\n## Further Reading\n\n- [How Style Scoping Works with Element Queries](http://codepen.io/tomhodgins/post/how-style-scoping-works-with-element-queries)\n- [What the Heck are Element Queries \u0026 Container Queries?](http://codepen.io/tomhodgins/post/what-the-heck-are-element-queries-container-queries)\n- [Writing Element Queries Today Using EQCSS](https://www.sitepoint.com/eqcss-a-javascript-plugin-to-write-element-queries/)\n- [The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today](https://www.smashingmagazine.com/2016/07/how-i-ended-up-with-element-queries-and-how-you-can-use-them-today/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomhodgins%2Felement-queries-spec","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomhodgins%2Felement-queries-spec","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomhodgins%2Felement-queries-spec/lists"}