{"id":201268,"date":"2015-05-12T08:14:37","date_gmt":"2015-05-12T15:14:37","guid":{"rendered":"http:\/\/css-tricks.com\/?p=201268"},"modified":"2024-05-21T13:43:44","modified_gmt":"2024-05-21T20:43:44","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":"\n

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\n\n\n\n\n\n

Regular Rules<\/h3>\n\n\n

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

@[KEYWORD] (RULE);<\/code><\/pre>\n\n\n
@charset<\/code><\/h4>\n\n\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\n\n\n
@charset \"UTF-8\";<\/code><\/pre>\n\n\n
@import<\/code><\/h4>\n\n\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\n\n\n
@import 'global.css';<\/code><\/pre>\n\n\n\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\n\n
@namespace<\/code><\/h4>\n\n\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\n\n\n
\/* Namespace for XHTML *\/\n@namespace url(http:\/\/www.w3.org\/1999\/xhtml);\n\n\/* Namespace for SVG embedded in XHTML *\/\n@namespace svg url(http:\/\/www.w3.org\/2000\/svg);<\/code><\/pre>\n\n\n
Nested Rules<\/h3>\n\n\n
Nested rules contain a subset of additional statements, some of which might be conditional to a specific situation.<\/p>\n\n\n\n
@[KEYWORD] {\n  \/* Nested Statements *\/\n}<\/code><\/pre>\n\n\n
@document<\/code><\/h4>\n\n\n
This rule specifies conditions for styles that apply to a specific page. For example, we can provide a URL and then customize the styles for that particular page. Those styles will be ignored on other pages.<\/p>\n\n\n\n
@document \n  \/* Rules for a specific page *\/\n  url(https:\/\/css-tricks.com\/),\n  \n  \/* Rules for pages with a URL that begin with... *\/\n  url-prefix(https:\/\/css-tricks.com\/snippets\/),\n  \n  \/* Rules for any page hosted on a domain *\/\n  domain(css-tricks.com),\n\n  \/* Rules for all secure pages *\/\n  regexp(\"https:.*\")\n{\n  \n  \/* Start styling *\/\n  body { font-family: Comic Sans; }\n\n}<\/code><\/pre>\n\n\n\n
The browser support for @document<\/code> is pretty weak <\/a>at the time of this writing:<\/p>\n\n\n\n
Chrome<\/th>Safari<\/th>Firefox<\/th>Opera<\/th>IE<\/th>Android<\/th>iOS<\/th><\/tr><\/thead>
No<\/td>No<\/td>Limited<\/td>No<\/td>No<\/td>No<\/td>No<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n
@font-face<\/code><\/h4>\n\n\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\n\n\n
@font-face {\n  font-family: 'MyWebFont';\n  src:  url('myfont.woff2') format('woff2'),\n        url('myfont.woff') format('woff');\n}<\/code><\/pre>\n\n\n\n
\n  \n          Learn more about @font-face      <\/summary>\n  \n\n    \t\t\n    
\n      
\n\n  
\n    \n      How to use @font-face in CSS    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      The New Bulletproof @Font-Face Syntax    <\/a>\n  <\/h3>\n\n  \n      
\n      web fonts<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      What’s the deal with declaring font properties on @font-face?    <\/a>\n  <\/h3>\n\n  \n      
\n      font-face<\/a> typography<\/a> web fonts<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      The @font-face dilemma    <\/a>\n  <\/h3>\n\n  \n      
\n      web fonts<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Don’t just copy the @font-face out of Google Fonts URLs    <\/a>\n  <\/h3>\n\n  \n      
\n      font-face<\/a> fonts<\/a> typography<\/a> web fonts<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      How To Rename a Font in CSS    <\/a>\n  <\/h3>\n\n  \n      
\n      font-face<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Custom Fonts in Emails    <\/a>\n  <\/h3>\n\n  \n      
\n      web fonts<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      FOUT, FOIT, FOFT    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      The Best Font Loading Strategies and How to Execute Them    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Zell Liew    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Public Service Announcement: Watch Your @font-face font-weight    <\/a>\n  <\/h3>\n\n  \n      
\n      web fonts<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<\/details>\n\n
@keyframes<\/code><\/h4>\n\n\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\n\n\n
@keyframes pulse {\n  0% {\n    background-color: #001f3f;\n  }\n  100% {\n    background-color: #ff4136;\n  }\n}<\/code><\/pre>\n\n\n\n
\n  \n          Learn more about @keyframes      <\/summary>\n  \n\n    \t\t\n    
\n      
\n\n  
\n    \n      Keyframe Animation Syntax    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Debugging CSS Keyframe Animations    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Sarah Drasner    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Starting CSS Animations Mid-Way    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      CSS Keyframe Animation with Delay Between Iterations    <\/a>\n  <\/h3>\n\n  \n      
\n      animation<\/a> CSS<\/a> keyframes<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      A New Way to Delay Keyframes Animations    <\/a>\n  <\/h3>\n\n  \n      
\n      animation<\/a> animation-delay<\/a> keyframes<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Eric Johnson    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Animate to Different End States Using One Set of CSS Keyframes    <\/a>\n  <\/h3>\n\n  \n      
\n      keyframes<\/a> particles<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Ana Tudor    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      How much specificity do @rules have, like @keyframes and @media?    <\/a>\n  <\/h3>\n\n  \n      
\n      at-rules<\/a> specificity<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Using Custom Properties to Wrangle Variations in Keyframe Animations    <\/a>\n  <\/h3>\n\n  \n      
\n      css animation<\/a> custom properties<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Sandrina Pereira    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      “Shake” CSS Keyframe Animation    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Sarah Drasner    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<\/details>\n\n
@media<\/code><\/h4>\n\n\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\n\n\n
\/* iPhone in Portrait and Landscape *\/\n@media only screen \n  and (min-device-width: 320px) \n  and (max-device-width: 480px)\n  and (-webkit-min-device-pixel-ratio: 2) {\n\n    .module { width: 100%; }\n\n}<\/code><\/pre>\n\n\n\n
Or applying styles only to the document when it is printed:<\/p>\n\n\n\n
@media print {\n\n}<\/code><\/pre>\n\n\n\n
\n  \n          Learn more about @media      <\/summary>\n  \n\n    \t\t\n    
\n      
\n\n  
\n    \n      CSS Media Queries Guide    <\/a>\n  <\/h3>\n\n  \n      
\n      media queries<\/a>    <\/div>\n  \n  
\n    \n      \"\"    <\/a>\n  \n    \n      Andr\u00e9s Galante    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Naming Media Queries    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Nested Media Queries    <\/a>\n  <\/h3>\n\n  \n      
\n      media queries<\/a> nesting<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      The New CSS Media Query Range Syntax    <\/a>\n  <\/h3>\n\n  \n      
\n      media queries<\/a> responsive<\/a>    <\/div>\n  \n  
\n    \n      \"\"    <\/a>\n  \n    \n      Preethi Selvam    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Logic in CSS Media Queries (If \/ Else \/ And \/ Or \/ Not)    <\/a>\n  <\/h3>\n\n  \n      
\n      logic<\/a> media queries<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      An Introduction to the Reduced Motion Media Query    <\/a>\n  <\/h3>\n\n  \n      
\n      accessibility<\/a> animation<\/a> SVG<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Eric Bailey    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Bandwidth Media Queries    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      Animated Media Queries    <\/a>\n  <\/h3>\n\n  \n      
\n      animation<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      CSS Media Queries & Using Available Space    <\/a>\n  <\/h3>\n\n  \n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      How much specificity do @rules have, like @keyframes and @media?    <\/a>\n  <\/h3>\n\n  \n      
\n      at-rules<\/a> specificity<\/a>    <\/div>\n  \n  
\n    \n      Image    <\/a>\n  \n    \n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<\/details>\n\n
@page<\/code><\/h4>\n\n\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\n\n\n
@page :first {\n  margin: 1in;\n}<\/code><\/pre>\n\n\n
@property<\/code><\/h4>\n\n\n
CSS variables have been around a while now. We can define them pretty easily for any values we use regularly, like colors.<\/p>\n\n\n\n
:root {\n  --primary-color: oklch(70% 0.183 42.88);\n}\n\nbody {\n  color: var(--primary-color);\n}<\/code><\/pre>\n\n\n\n
This is awesome, of course. But it’s not all sparkles and unicorns. For example, it’s impossible to animate between two variables, like say, the colors of a gradient. You might think it’s possible to rotate through the entire color wheel by setting up a variable for a color’s hue in a color function like this:<\/p>\n\n\n\n
:root {\n  --hue: 0;\n}\n\nbody {\n  animation: hue 5s linear infinite;\n  background-color: hsl(var(--hue) 80% 50%);\n}\n\n@keyframes hue {\n    0% { --hue; }\n  100% { --hue: 360; }\n}<\/code><\/pre>\n\n\n\n
That certainly looks valid! But it just don’t work. That’s because CSS recognizes that number as a string as opposed to an actual number. We have to register what’s called a custom property<\/strong> in order to wire it all up.<\/p>\n\n\n\n
That’s where @property<\/code> comes in. It’s used to not only register a CSS variable, but also to define its type<\/em>, the initial value<\/em> it defaults to, and whether or not it inherits<\/em> values from other properties. It’s a lot like defining our very own specification for a specific type of data!<\/p>\n\n\n\n
Getting back to that animated gradient, let’s set up our custom property:<\/p>\n\n\n\n
@property --hue {\n  syntax: \"<number>\";\n  initial-value: 0;\n  inherits: false;\n}<\/code><\/pre>\n\n\n\n
Now we can actually use --hue<\/code> to rotate around the full color wheel between 0deg<\/code> and 360deg<\/code>:<\/p>\n\n\n\n
body {\n  animation: hue 5s linear infinite;\n  background-color: hsl(var(--hue) 100% 50%);\n}\n\n@keyframes hue {\n    0% { --hue; }\n  100% { --hue: 360; }\n}<\/code><\/pre>\n\n\n\n
See the article “Interpolating Numeric CSS\u00a0Variables” for a complete explanation of how @property<\/code> works as well as a demo of the animated gradient.<\/p>\n\n\n\n
\n  \n          Learn more about @property      <\/summary>\n  \n\n    \t\t\n    
\n      
\n\n