{"id":201268,"date":"2015-05-12T08:14:37","date_gmt":"2015-05-12T15:14:37","guid":{"rendered":"http:\/\/css-tricks.com\/?p=201268"},"modified":"2015-05-13T15:32:20","modified_gmt":"2015-05-13T22:32:20","slug":"the-at-rules-of-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-at-rules-of-css\/","title":{"rendered":"The At-Rules of CSS"},"content":{"rendered":"

The at-rule<\/code> is a statement that provides CSS with instructions to perform or how to behave. Each statement begins with an @<\/code> followed directly by one of several available keywords that acts as the identifier for what CSS should do. This is the common syntax, though each at-rule<\/code> is a variation of it.<\/p>\n

<\/p>\n

Regular Rules<\/h3>\n

Regular rules are ones that follow a regular syntax:<\/p>\n

@[KEYWORD] (RULE);<\/code><\/pre>\n
@charset<\/code><\/h4>\n
This rule defines the character set used by the browser. It comes in handy if the stylesheet contains non-ASCII characters<\/a> (e.g. UTF-8<\/a>). Note that a character set that is placed on the HTTP header<\/a> will override any @charset<\/code> rule.<\/p>\n
@charset \"UTF-8\";<\/code><\/pre>\n
@import<\/code><\/h4>\n
This rule is inserted at the very top of the file and instructs the stylesheet to request and include an external CSS file as if the contents of that file were right where that line is. <\/p>\n
@import 'global.css';<\/code><\/pre>\n
With the popularity of CSS preprocessors that support @import, it should be noted that they work differently than native CSS @import<\/code> is a separate HTTP request for that file.<\/p>\n
@namespace<\/code><\/h4>\n
This rule is particularly useful for applying CSS to XML HTML (XHTML) so that XHTML elements can be used as selectors in the CSS.<\/p>\n
\/* Namespace for XHTML *\/\r\n@namespace url(http:\/\/www.w3.org\/1999\/xhtml);\r\n\r\n\/* Namespace for SVG embedded in XHTML *\/\r\n@namespace svg url(http:\/\/www.w3.org\/2000\/svg);<\/code><\/pre>\n
Nested Rules<\/h3>\n
Nested rules contain a subset of additional statements, some of which might be conditional to a specific situation.<\/p>\n
@[KEYWORD] {\r\n  \/* Nested Statements *\/\r\n}<\/code><\/pre>\n
@document<\/code><\/h4>\n
This rule specifies conditions for styles that apply to a specific page. For example, we can provide a URL then customize the styles for that particular page. Those styles will be ignored on other pages.<\/p>\n
@document \r\n  \/* Rules for a specific page *\/\r\n  url(https:\/\/css-tricks.com\/),\r\n  \r\n  \/* Rules for pages with a URL that begin with... *\/\r\n  url-prefix(https:\/\/css-tricks.com\/snippets\/),\r\n  \r\n  \/* Rules for any page hosted on a domain *\/\r\n  domain(css-tricks.com),\r\n\r\n  \/* Rules for all secure pages *\/\r\n  regexp(\"https:.*\")\r\n{\r\n  \r\n  \/* Start styling *\/\r\n  body { font-family: Comic Sans; }\r\n\r\n}<\/code><\/pre>\n
The support for @document<\/code> is pretty weak at the time of this writing:<\/p>\n\n\n\n\n\n
Chrome<\/span><\/th>\nSafari<\/span><\/th>\nFirefox<\/span><\/th>\nOpera<\/span><\/th>\nIE<\/span><\/th>\nAndroid<\/span><\/th>\niOS<\/span><\/th>\n<\/tr>\n<\/thead>\n
No<\/td>\nNo<\/td>\n-moz<\/td>\nNo<\/td>\nNo<\/td>\nNo<\/td>\nNo<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
@font-face<\/code><\/h4>\n
This rule allows us to load custom fonts on a webpage. There are varying levels of support<\/a> for custom fonts, but this rule accepts statements that create and serve those fonts.<\/p>\n
@font-face {\r\n  font-family: 'MyWebFont';\r\n  src:  url('myfont.woff2') format('woff2'),\r\n        url('myfont.woff') format('woff');\r\n}<\/code><\/pre>\n
@keyframes<\/code><\/h4>\n
This rule is the basis for keyframe<\/a> animations<\/a> on many CSS properties, by allowing us to mark the start and stop (and in-between) marks for what is being animated.<\/p>\n
@keyframes pulse {\r\n  0% {\r\n    background-color: #001f3f;\r\n  }\r\n  100% {\r\n    background-color: #ff4136;\r\n  }\r\n}<\/code><\/pre>\n
@media<\/code><\/h4>\n
This rule contains conditional statements for targeting styles to specific screens. These statements can include screen sizes, which can be useful for adapting styles to devices<\/a>:<\/p>\n
\/* iPhone in Portrait and Landscape *\/\r\n@media only screen \r\n  and (min-device-width: 320px) \r\n  and (max-device-width: 480px)\r\n  and (-webkit-min-device-pixel-ratio: 2) {\r\n\r\n    .module { width: 100%; }\r\n\r\n}<\/code><\/pre>\n
Or applying styles only to the document when it is printed:<\/p>\n
@media print {\r\n\r\n}<\/code><\/pre>\n
@page<\/code><\/h4>\n
This rule defines styles that are to individual pages when printing the document. It specifically contains pseudo-elements for styling the :first<\/code> page as well as the :left<\/code> and :right<\/code> margins of the page.<\/p>\n
@page :first {\r\n  margin: 1in;\r\n}<\/code><\/pre>\n
@supports<\/code><\/h4>\n
This rule tests whether a browser supports a feature, then applies the styles for those elements if the condition is met. It’s sort of like Modernizr<\/a> but tailored specially for CSS properties.<\/p>\n
\/* Check one supported condition *\/\r\n@supports (display: flex) {\r\n  .module { display: flex; }\r\n}\r\n\r\n\/* Check multiple conditions *\/\r\n@supports (display: flex) and (-webkit-appearance: checkbox) {\r\n  .module { display: flex; }\r\n}<\/code><\/pre>\n
Here’s the, uh, support for @supports<\/code>:<\/p>\n\n\n\n\n\n
Chrome<\/span><\/th>\nSafari<\/span><\/th>\nFirefox<\/span><\/th>\nOpera<\/span><\/th>\nIE<\/span><\/th>\nAndroid<\/span><\/th>\niOS<\/span><\/th>\n<\/tr>\n<\/thead>\n
28+<\/td>\nNo<\/td>\n31+<\/td>\n12.1+<\/td>\nEdge<\/td>\n4.4+<\/td>\nNo<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
Wrapping Up<\/h3>\n
The at-rule<\/code> is where it’s at for making CSS do some crazy and interesting things. While the examples here are basic, we can see how they might be used to handcraft styles to very specific conditions, thereby creating user experiences and interactions that match a scenario.<\/p>\n","protected":false},"excerpt":{"rendered":"
The at-rule is a statement that provides CSS with instructions to perform or how to behave. Each statement begins with an @ followed directly by one of several available keywords that acts as the identifier for what CSS should do. This is the common syntax, though each at-rule is a variation of it.<\/p>\n","protected":false},"author":2508,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":307873,"url":"https:\/\/css-tricks.com\/david-barons-thoughts-on-an-implementable-path-forward-for-container-queries\/","url_meta":{"origin":201268,"position":0},"title":"[David Baron’s] Thoughts on an implementable path forward for Container Queries","date":"April 29, 2020","format":false,"excerpt":"That's the title of a public post from David Baron, a Principal Engineer at Firefox, with thoughts toward container queries. I know a lot of people have been holding their breath waiting for David's ideas, as he's one of few uniquely qualified to understand the ins and outs of this\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373639,"url":"https:\/\/css-tricks.com\/css-rules-vs-css-rulesets\/","url_meta":{"origin":201268,"position":1},"title":"CSS Rules vs. CSS Rulesets","date":"September 21, 2022","format":false,"excerpt":"The latest spec: A\u00a0style rule\u00a0is a\u00a0qualified rule\u00a0that associates a\u00a0selector list\u00a0with a list of property declarations and possibly a list of nested rules. They are also called\u00a0rule sets\u00a0in\u00a0CSS2. Louis Lazaris: As the above quote from W3C indicates, it seems like the W3C considers \u201crule set\u201d to be a bit of an\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/05\/css-ruleset-terminology.png?fit=1200%2C547&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":240767,"url":"https:\/\/css-tricks.com\/stylelint\/","url_meta":{"origin":201268,"position":2},"title":"Lint your CSS with stylelint","date":"April 20, 2016","format":false,"excerpt":"You write CSS. Probably a lot of CSS. And you make mistakes. Probably a lot of mistakes. Somebody needs to stop you from making mistakes in your CSS. Sometimes your mistake is a real bug. Sometimes it's just sloppy, inconsistent, or unclear coding style. Some of them may seem trivial\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":372839,"url":"https:\/\/css-tricks.com\/interpolating-numeric-css-variables\/","url_meta":{"origin":201268,"position":3},"title":"Interpolating Numeric CSS Variables","date":"August 30, 2022","format":false,"excerpt":"We can make variables in CSS pretty easily: :root { --scale: 1; } And we can declare them on any element: .thing { transform: scale(var(--scale)); } Even better for an example like this is applying the variable on a user interaction, say :hover: :root { --scale: 1; } .thing {\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/scale-layers-scaled-1.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317807,"url":"https:\/\/css-tricks.com\/css-vocabulary\/","url_meta":{"origin":201268,"position":4},"title":"CSS Vocabulary","date":"July 27, 2020","format":false,"excerpt":"This is a neat interactive page by Ville V. Vanninen to reference the names of things in the CSS syntax. I feel like the easy ones to remember are \"selector,\" \"property,\" and \"value,\" but even as a person who writes about CSS a lot, I forget some of the others.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-23-at-10.44.16-AM.png?fit=1200%2C787&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353112,"url":"https:\/\/css-tricks.com\/writing-your-own-code-rules\/","url_meta":{"origin":201268,"position":5},"title":"Writing Your Own Code Rules","date":"October 7, 2021","format":false,"excerpt":"There comes a time on a project when it's worth investing in tooling to protect the codebase. I'm not sure how to articulate when, but it's somewhere after the project has proven to be something long-term and rough edges are starting to show, and before things feel like a complete\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/nodes-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/201268"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=201268"}],"version-history":[{"count":25,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/201268\/revisions"}],"predecessor-version":[{"id":202147,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/201268\/revisions\/202147"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=201268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=201268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=201268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}