{"id":13397988,"url":"https://github.com/marcj/css-element-queries","last_synced_at":"2025-05-13T18:09:22.321Z","repository":{"id":8747524,"uuid":"10425992","full_name":"marcj/css-element-queries","owner":"marcj","description":"CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.","archived":false,"fork":false,"pushed_at":"2023-09-28T02:03:39.000Z","size":3089,"stargazers_count":4266,"open_issues_count":57,"forks_count":488,"subscribers_count":99,"default_branch":"master","last_synced_at":"2025-04-25T14:50:50.770Z","etag":null,"topics":["css","element-query","media-query","responsive"],"latest_commit_sha":null,"homepage":"http://marcj.github.io/css-element-queries/","language":"JavaScript","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/marcj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"marcj"}},"created_at":"2013-06-01T17:48:50.000Z","updated_at":"2025-04-17T09:11:46.000Z","dependencies_parsed_at":"2024-02-10T12:47:08.591Z","dependency_job_id":null,"html_url":"https://github.com/marcj/css-element-queries","commit_stats":{"total_commits":141,"total_committers":66,"mean_commits":"2.1363636363636362","dds":0.7092198581560284,"last_synced_commit":"4eae4654f4683923153d8dd8f5c0d1bc2067b2a8"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2Fcss-element-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2Fcss-element-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2Fcss-element-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2Fcss-element-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcj","download_url":"https://codeload.github.com/marcj/css-element-queries/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254000850,"owners_count":21997441,"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":["css","element-query","media-query","responsive"],"created_at":"2024-07-30T18:02:00.147Z","updated_at":"2025-05-13T18:09:22.300Z","avatar_url":"https://github.com/marcj.png","language":"JavaScript","readme":"# CSS Element Queries\n\n\n[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/marcj/css-element-queries?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\nElement Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+).\nIt allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported)\nsize while not causing performance lags due to event based implementation.\n\nIt's a proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.\n\nFeatures:\n\n - no performance issues since it listens only on size changes of elements that have element query rules defined through css. Other element query polifills only listen on `window.onresize` which causes performance issues and allows only to detect changes via window.resize event and not inside layout changes like css3 animation, :hover, DOM changes etc.\n - no interval/timeout detection. Truly event-based through integrated ResizeSensor class.\n - automatically discovers new DOM elements. No need to call javascript manually.\n - no CSS modifications. Valid CSS Syntax\n - all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML/JS.\n - supports and tested in webkit, gecko and IE(10+)\n - `min-width`, `min-height`, `max-width` and `max-height` are supported so far\n - works with any layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (also percent changes), pseudo classes (:hover etc.), window resizes and more\n - no Javascript-Framework dependency (works with jQuery, Mootools, etc.)\n - Works beautiful for responsive images without FOUC\n\nMore demos and information: http://marcj.github.io/css-element-queries/\n\n## Examples\n\n### Element Query\n\n```css\n.widget-name h2 {\n    font-size: 12px;\n}\n\n.widget-name[min-width~=\"400px\"] h2 {\n    font-size: 18px;\n}\n\n.widget-name[min-width~=\"600px\"] h2 {\n    padding: 55px;\n    text-align: center;\n    font-size: 24px;\n}\n\n.widget-name[min-width~=\"700px\"] h2 {\n    font-size: 34px;\n    color: red;\n}\n```\n\nAs you can see we use the `~=` [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).\nSince this css-element-queries polyfill adds new element attributes on the DOM element\n(`\u003cdiv class=\"widget-name\" min-width=\"400px 700px\"\u003e\u003c/div\u003e`) depending on your actual CSS and element's dimension,\nyou should always use this attribute selector (especially if you have several element query rules on the same element).\n\n```html\n\u003cdiv class=\"widget-name\"\u003e\n   \u003ch2\u003eElement responsiveness FTW!\u003c/h2\u003e\n\u003c/div\u003e\n```\n\n### Responsive image\n\n```html\n    \u003cdiv data-responsive-image\u003e\n        \u003cimg data-src=\"http://placehold.it/350x150\"/\u003e\n        \u003cimg min-width=\"350\" data-src=\"http://placehold.it/700x300\"/\u003e\n        \u003cimg min-width=\"700\" data-src=\"http://placehold.it/1400x600\"/\u003e\n    \u003c/div\u003e\n```\n\nInclude the javascript files at the bottom and you're good to go. No custom javascript calls needed.\n\n```html\n\u003cscript src=\"src/ResizeSensor.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"src/ElementQueries.js\"\u003e\u003c/script\u003e\n```\n\n## See it in action:\n\nHere live http://marcj.github.io/css-element-queries/.\n\n![Demo](http://marcj.github.io/css-element-queries/images/css-element-queries-demo.gif)\n\n\n## Module Loader\n\nIf you're using a module loader you need to trigger the event listening or initialization yourself:\n\n```javascript\nvar ElementQueries = require('css-element-queries/src/ElementQueries');\n\n //attaches to DOMLoadContent\nElementQueries.listen();\n\n//or if you want to trigger it yourself.\n// Parse all available CSS and attach ResizeSensor to those elements which have rules attached\n// (make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.\nElementQueries.init();\n```\n\n## Issues\n\n - So far does not work on `img` and other elements that can't contain other elements. Wrapping with a `div` works fine though (See demo).\n - Adds additional hidden elements into selected target element and forces target element to be relative or absolute.\n - Local stylesheets do not work (using `file://` protocol).\n - If you have rules on an element that has a css animation, also add `element-queries`. E.g. `.widget-name { animation: 2sec my-animation, 1s element-queries;}`. We use this to detect new added DOM elements automatically.\n\n## License\n\nMIT license. Copyright [Marc J. Schmidt](https://twitter.com/MarcJSchmidt).\n","funding_links":["https://github.com/sponsors/marcj"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcj%2Fcss-element-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcj%2Fcss-element-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcj%2Fcss-element-queries/lists"}