搜索
首页web前端css教程您的CSS愿望清单上还有什么?

CSS愿望清单:你还有什么期待?

What ELSE is on your CSS wishlist?

CSS还能做什么?这就像深夜身处不该去的地方,一个穿着风衣的陌生人走近你,在你耳边低语:

“嘘,想买一些异步@imports吗?我这里有你想要的特异性。”

你知道你不应该考虑这个想法,但你还是这么做了。你所有的朋友都在使用级联层。你是什么,一个老土?

我一直觉得今天编写CSS是多么令人惊叹。就在今天早上,我还在邮件中讨论了一系列UI持久控件的想法,如果一年前不是因为新的特性,比如锚点定位、滚动时间线、自动高度过渡和弹出框,这些想法听起来简直是疯了。我们仍然处于所有这些事物(以及许多其他事物)的早期阶段,还没有看到所有令人惊叹的可能性实现。令人兴奋的时代!

Chris从2013年就开始保留CSS愿望清单,并在2019年对其进行了跟进。我们都希望看到CSS能做些什么,无论我们获得了多少闪亮的新特性,我们都会一直这样。让我们回顾一下2013年的愿望:

  1. “我希望能够根据元素是否包含另一个特定选择器来选择元素。” 你好,:has()!
  2. ❌ “我希望能够根据元素包含的内容来选择元素。”
  3. ❌ “我希望有多个伪元素。”
  4. ✅ “我希望能够动画/过渡到height: auto;” 是的,我们做到了!
  5. ? “我希望有Sass的功能,例如@extend,@mixin和嵌套。” 我们已经实现了嵌套部分,并且在mixins方面取得了一些进展。
  6. ❌ “我希望有::nth-letter,::nth-word等等。”
  7. ✅ “我希望所有主要浏览器都能自动更新。” 这一个已经实现了。

所以,大约7个愿望实现了3.5个。很可能其中一些东西在某些时候不受欢迎了(自从第一个愿望清单以来,我没有听到任何人哭着喊着要一个新的伪元素)。Chris这样重新表述了这个清单:

  • 父查询。例如,以任何方式选择一个元素,然后选择该元素的父元素。我们有一些证据表明,使用:focus-within是可能的。
  • 容器查询。在元素本身处于特定条件下时选择特定元素。
  • 表单元素的标准化样式。
  • Has/Contains选择器。
  • 到自动尺寸的过渡。
  • 视口单位的改进处理。

我们已经完成了大部分工作!我们可以查询父元素和容器。我们正在探索可样式化的选择器和字段大小。我们了解:has(),并且我们仍然对到固有尺寸的过渡感到兴奋。我们公开讨论过CSS是否太多了(并没有)。

但是你的CSS愿望清单上还有什么?具有讽刺意味的是,Adam Argyle就在今天早上进行了这项练习,我喜欢他将事情分解成面向用户的愿望清单和面向开发者的愿望清单的方式。我的意思是,一个CSS轮播?是的,请!我喜欢他的清单和所有类似的清单。

我们将总结并列出一个清单——所以请告诉我们!

以上是您的CSS愿望清单上还有什么?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
链接HTML中CSS文件的最终指南链接HTML中CSS文件的最终指南May 13, 2025 am 12:02 AM

链接CSS文件到HTML可以通过在HTML的部分使用元素实现。1)使用标签链接本地CSS文件。2)多个CSS文件可通过添加多个标签实现。3)外部CSS文件使用绝对URL链接,如。4)确保正确使用文件路径和CSS文件加载顺序,优化性能可使用CSS预处理器合并文件。

CSS Flexbox与网格:全面评论CSS Flexbox与网格:全面评论May 12, 2025 am 12:01 AM

选择Flexbox还是Grid取决于布局需求:1)Flexbox适用于一维布局,如导航栏;2)Grid适合二维布局,如杂志式布局。两者在项目中可结合使用,提升布局效果。

如何包括CSS文件:方法和最佳实践如何包括CSS文件:方法和最佳实践May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件,如。2.对于小型调整,可以使用内联CSS,但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less,通过@import导入其他CSS文件。4.为了性能,应合并CSS文件并使用CDN,同时使用工具如CSSNano进行压缩。

Flexbox vs Grid:我应该学习两者吗?Flexbox vs Grid:我应该学习两者吗?May 10, 2025 am 12:01 AM

是的,youshouldlearnbothflexboxandgrid.1)flexboxisidealforone-demensional,flexiblelayoutslikenavigationmenus.2)gridexcelstcelsintwo-dimensional,confffferDesignssignssuchasmagagazineLayouts.3)blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

轨道力学(或我如何优化CSS KeyFrames动画)轨道力学(或我如何优化CSS KeyFrames动画)May 09, 2025 am 09:57 AM

重构自己的代码看起来是什么样的?约翰·瑞亚(John Rhea)挑选了他写的一个旧的CSS动画,并介绍了优化它的思维过程。

CSS动画:很难创建它们吗?CSS动画:很难创建它们吗?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS:最常用的技巧@KeyFrames CSS:最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcssanimations.keytricksinclude:1)definingsmoothtransitionsbetnestates,2)使用AnimatingmatematingmultationmatingMultationPropertiessimultane,3)使用使用4)使用BombingeNtibalibility,4)使用BombingingWithjavofofofofofoffo

CSS计数器:自动编号的综合指南CSS计数器:自动编号的综合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1)他们可以使用forterablesofcontents,ListItems,and customnumbering.2)AdvancedsincludenestednumberingSystems.3)挑战挑战InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4)创造性

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),