网络科技

    今日:808| 主题:278733
收藏本版
互联网、科技极客的综合动态。

[其他] Quick Tip: Add a @supports CSS File to Your CodePen Demos

[复制链接]
城府 投递于 2016-10-11 00:39:33
309 7
When your CodePen demos rely on cutting edge CSS it’s a good idea to warn people. Let’s provide a notification when browsers don’t support our demos, using the @support rule to make a handy reusable CodePen asset.
  End Result

   Here’s what we’re working towards; a reusable notification to highlight unsupported CSS. It will be kept almost entirely in its own pen, which we can add to other demos via an External CSS link:
     

Quick Tip: Add a @supports CSS File to Your CodePen Demos

Quick Tip: Add a @supports CSS File to Your CodePen Demos-1-网络科技-decoration,beginning,following,sometimes,emerging
    You’ll find we use it on Tuts+ for CSS tutorials like the following:
  
       
  •                

    Quick Tip: Add a @supports CSS File to Your CodePen Demos

    Quick Tip: Add a @supports CSS File to Your CodePen Demos-2-网络科技-decoration,beginning,following,sometimes,emerging
           Better CSS Drop Caps With “initial-letter”

               Drop caps are a form of decoration sometimes used at the beginning of a block of text; the initial letter running several lines deep and indenting the body...
       
  •                

    Quick Tip: Add a @supports CSS File to Your CodePen Demos

    Quick Tip: Add a @supports CSS File to Your CodePen Demos-3-网络科技-decoration,beginning,following,sometimes,emerging
           Having Fun With Tomorrow’s CSS: Backdrop Filters

               In this tutorial we will look into an emerging CSS toy going by the name of “Backdrop Filter”.
       
  •                

    Quick Tip: Add a @supports CSS File to Your CodePen Demos

    Quick Tip: Add a @supports CSS File to Your CodePen Demos-4-网络科技-decoration,beginning,following,sometimes,emerging
           CSS Grid Layout: Fluid Columns and Better Gutters

               In this tutorial we’re going to take the grid from our previous tutorial and use it as a playground to look further into Grid. We’ll improve the way we...
      
  The @supports Rule

   CSS @supports has been around for a few years and enjoys pretty decent browser support itself. It enables us to perform feature queries , applying CSS only if specified properties are supported by the browser at the time. This prevents half-executed style rules and even allows us to display a warning if we fancy it.
  It works by wrapping style declarations in a condition, like this:
  1. @supports (display: grid) {
  2.   div {
  3.     /* when CSS Grid is supported, do something */
  4.   }
  5. }
复制代码
Notifications

  Let’s whip up a couple of quick notifications:
   We’re adding the textual content via a pseudo element so that we can control it from one single place. These labels will ultimately be used on many demos, so keeping the content separate means we can change them all in one go.
  1. .support-initial-letter::after {
  2.     content: ":hand|type_3: Hold on there cowboy; initial-letter is unsupported in your browser.";
  3. }
复制代码
Feel free to style these however you want.
  Adding the @supports Condition

   Our notifications are visible by default, but we only want them to be displayed when their respective properties aren’t supported. Let’s add a condition to do that:
  1. @supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
  2.   .support-initial-letter::after {
  3.     display: none;
  4.   }
  5. }
复制代码
  Here we’re saying “if initial-letter or -webkit-initial-letter are supported, don’t display the .support-initial-letter notification” .
  We then repeat this for each of the notifications, giving us the following finished pen:
  How many notifications can you see?
  Reuse as an External CodePen Asset

  With our pen saved we can reference it from other pens, giving us a super-useful external asset. Add it to a new pen as an external CSS file:
     

Quick Tip: Add a @supports CSS File to Your CodePen Demos

Quick Tip: Add a @supports CSS File to Your CodePen Demos-5-网络科技-decoration,beginning,following,sometimes,emerging
    This will only pull in the CSS, ignoring any HTML or JS we have in there, so now add whichever notification element you need to the HTML of your new pen:
  1. <div class="support-backdrop-filter"></div>
复制代码
And that’s it, done! Whenever you update your @supports pen, those changes will be reflected across all the demos you’ve used it on.
  Conclusion

   You’ll notice a lot of cutting edge CodePenners using a @supports notification on their pens; Jen Simmons does it, Rachel Andrew does it, and we do it. Pulling your notification styles into an external pen is the perfect way to manage things whilst keeping your markup sparkling clean. Update the messages, add new CSS properties, apply seasonal branding, go nuts! Let us know how you use @supports in the comments.
  Further Resources

  
       
  • CSS Feature Detection: Modernizr or Feature Queries?   
  • @supports on MDN   
  • Adding External Resources on CodePen  



上一篇:纪念我曾经的 JAVA 姿势
下一篇:Top JavaScript Frameworks List In 2016
zaz11888 投递于 2016-10-11 04:25:52
支持一下!
回复 支持 反对

使用道具 举报

龙海文 投递于 2016-10-11 04:30:00
这么经典的话只有城府能想到!
回复 支持 反对

使用道具 举报

ma11chuangye 投递于 2016-10-12 03:11:09
有些的时候,正是为了爱才悄悄躲开.躲开的是身影,躲不开的却是那份默默的情怀。
回复 支持 反对

使用道具 举报

刘星 投递于 2016-10-14 05:56:09
问君能有几多愁,恰似一群太监上青楼……
回复 支持 反对

使用道具 举报

博涛 投递于 2016-10-15 04:05:01
我左青龙,右白虎,肩膀纹个米老鼠.
回复 支持 反对

使用道具 举报

rondofu203 投递于 2016-10-23 00:14:00
星期日的心情很不错啊
回复 支持 反对

使用道具 举报

静曼 投递于 2016-10-23 03:56:40
不错的~~! 感谢提供
回复 支持 反对

使用道具 举报

我要投稿

回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表