The default way to include an external stylesheet is to use the the link tag inside your pages head:<\/p>\n
<link rel=\"stylesheet\" href=\"default.css\"><\/code><\/pre>\nThat is a tried and true method and supports the whole spectrum of browsers from old and ancient to hip and modern. But let’s say you grown tired of the old and ancient… You don’t want your page to be completely unusable, but you would rather it look completely non-styled than broken and clumsy. You could use an @rule to declare your CSS instead like this:<\/p>\n
<style>@import url(default.css);<\/style><\/code><\/pre>\nThis leaves outdated browsers like Netscape 4.x out of the mix and will deliver to them a style-less page. Assuming your markup is good, you should be fine.<\/p>\n
At-Rules are good for other fanciness, but none of it as globally effective as this. Internet Explorer (IE) supports the embedding of external fonts with @rules, which is something every designer should drool over, but IE is the only one on the bandwagon which makes it mostly pointless and implementing it would be a step in the wrong direction.<\/p>\n","protected":false},"excerpt":{"rendered":"
The default way to include an external stylesheet is to use the the link tag inside your pages head: <link rel=”stylesheet” href=”default.css”> That is a tried and true method and supports the whole spectrum of browsers from old and ancient to hip and modern. But let’s say you grown tired of the old and ancient… […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","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":277540,"url":"https:\/\/css-tricks.com\/using-feature-detection-conditionals-and-groups-with-selectors\/","url_meta":{"origin":20,"position":0},"title":"Using Feature Detection, Conditionals, and Groups with Selectors","date":"October 19, 2018","format":false,"excerpt":"CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in most cases, it is possible to successfully use a newer\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/supported-selectors.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":201268,"url":"https:\/\/css-tricks.com\/the-at-rules-of-css\/","url_meta":{"origin":20,"position":1},"title":"The At-Rules of CSS","date":"May 12, 2015","format":false,"excerpt":"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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":275174,"url":"https:\/\/css-tricks.com\/using-feature-detection-to-write-css-with-cross-browser-support\/","url_meta":{"origin":20,"position":2},"title":"Using Feature Detection to Write CSS with Cross-Browser Support","date":"August 22, 2018","format":false,"excerpt":"In early 2017, I presented a couple of workshops on the topic of CSS feature detection, titled CSS Feature Detection in 2017. A friend of mine, Justin Slack from New Media Labs, recently sent me a link to the phenomenal Feature Query Manager extension (available for both Chrome and Firefox),\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/detection-featured.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338429,"url":"https:\/\/css-tricks.com\/platform-news-using-focus-visible-bbcs-new-typeface-declarative-shadow-doms-a11y-and-placeholders\/","url_meta":{"origin":20,"position":3},"title":"Platform News: Using :focus-visible, BBC’s New Typeface, Declarative Shadow DOMs, A11Y and Placeholders","date":"April 16, 2021","format":false,"excerpt":"There's a whole lot of accessibility in this week's news, from the nuances of using :focus-visible and input placeholders, to accessible typefaces and a Safari bug with :display: contents. Plus, a snippet for a bare-bones web component that supports style encapsulation. Now may be a good time to start using\u2026","rel":"","context":"In "Weekly Platform News"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/wpn-20210416.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":358612,"url":"https:\/\/css-tricks.com\/embrace-the-platform\/","url_meta":{"origin":20,"position":4},"title":"Embrace the Platform","date":"December 13, 2021","format":false,"excerpt":"So what is the one thing that people can do is to make their website better? To answer that, let's take a step back in time \u2026 The year is 1998, and the web is on the rise. In an attempt to give a high-level overview of the architecture of\u2026","rel":"","context":"In "2021 End-of-Year Thoughts"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353179,"url":"https:\/\/css-tricks.com\/quickly-testing-css-fallbacks\/","url_meta":{"origin":20,"position":5},"title":"Quickly Testing CSS Fallbacks","date":"October 4, 2021","format":false,"excerpt":"Dumb trick alert! Not all browsers support all features. Say you want to write a fallback for browsers that doesn't support CSS Grid. Not very common these days, but it's just to illustrate a point. You could write the supporting CSS in an @supports blocks: @supports (display: grid) { .blocks\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-04-at-7.23.22-AM.png?fit=1200%2C785&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":205689,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/20\/revisions\/205689"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}