css盒-你对现代CSS了解多少

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

写在上面

现代 CSS 应该是 2023 年后端圈子的热门话题之一，也是在最近的 CSS Day 活动中。此外，社区中不乏关于现代CSS的讨论，以及如何使用现代CSS功能编写和组织CSS代码，以及如何使用现代CSS技术更好地重构可扩展和未来友好的Web项目。

在我完成Modern Web Layout和Defensive CSS卷之前，我已经计划编写一本关于CSS最新功能的小册子，我将其命名为Modern CSS。

我们先从明天的话题开始吧，剩下的内容就更长了，大概1万字左右要看！

从任何标准来看，CSS在过去几年中都得到了很大的改进。它具有更多有用的新功能和改进，其中许多是我们等待了很长时间的最新功能和改进。例如，CSS ：has（） 选择器、CSS 逻辑属性和逻辑值、视口动态单元、容器查询单元、容器查询、级联层、相对颜色、混合颜色、CSS 范围、CSS 嵌套、三角函数、滚动驱动动画、视图过渡和瀑布布局。

那么，在项目开发过程中，我们可以使用现代CSS的哪些功能呢？或者这些新功能将如何改变我们的 Web 开发？有关答案css盒，请继续阅读。

现代 CSS 选择器：关系选择器

尽管 CSS 中有许多不同类型的选择器，但现有的选择器并不总是满足 Web 开发人员的需求css盒，例如，Web 开发人员仍然期望父选择器使 Web 开发人员能够通过子元素选择父元素。而这种期望也伴随着 CSS 中 ：has（） 选择器的到来，即 CSS 中所谓的“父选择器”。同时，现代CSS增加了许多新的CSS选择器，如：is（），：where（），：not（），：focus-visible，：focus-in-in，：modal和：target。

现代 CSS 选择器可以在最新的重置 CSS 样式表中看到。例如，我现在还使用现代 CSS 功能在我的重置 CSS 样式表中放置方便的规则。这些规则的奇妙之处在于它们也是增量的，并且不严格要求回退。如果在浏览器中支持和应用它们，那就太好了！否则，对用户体验没有影响或影响很小。

例如，我为默认链接设置了一个公共 ton 符号，该符号的作用域为那些没有类的链接。这是一个假设，即无类链接努力保持常规的 Don 外观。更新是将 ton 符号设置为使用相对长度并降低 ton 偏移量。视觉效果可能很小，但它可以增强链接的可读性，尤其是在列表或其他特写上下文中呈现时。

/* 链接默认样式 */

a:not([class]) {


    /* 相对厚度并增加下划线偏移量 */

    text-decoration-thickness: max(0.08em, 1px);

    text-underline-offset: 0.15em;

}

CSS开发必须知道的16个调试工具和方法
大多数开发者基本上都是使用浏览器的开发者工具来调试后端，但即使使用Chrome的开发者工具好几年了css工具，我仍然会遇到以前从未见过的方法和功能。
在这篇文章中，我在 DevTools 中写了许多与 CSS 相关的功能和方法，我认为它们会将您的 CSS 开发提升到一个新的水平。 其中一些方法不仅仅适用于 CSS，无论如何我都将它们放在一起。
有些是简单的工作流程和调试方法，有些是过去几年引入的新功能。 其中大部分是基于Chrome的开发者工具，但也包括一些Firefox的方法。
检查 CSS 中通过 JavaScript 显示的元素
在开发人员工具的“元素”窗格中查找大多数元素的 CSS 并不困难。 在大多数情况下，您只需右键单击该元素，单击“检查”，然后（如有必要）仔细单击即可在“元素”面板中找到它。 选择元素后，其 CSS 将出现在“样式”窗格中，可供编辑。
有时，由于某些基于 JavaScript 的用户操作（例如单击或鼠标悬停），元素会动态显示。 检查它们的最直观方法是临时修改您的 JavaScript 或 CSS，使它们默认可见，使您可以轻松处理它，而无需模仿用户操作。
但是，如果您正在寻找一种仅使用开发人员工具使元素可见的更快方法，您可以按照以下步骤操作：
打开开发者工具 打开“源”面板 执行用户操作以使对象可见（例如键盘悬停） 当元素可见时按 F8（与“暂停脚本执行”按钮相同） 单击左上角的“选取元素”按钮开发者工具一角 单击页面上的某个元素
我们可以通过测试，只有当键盘悬浮在链接上触发JavaScript时才会显示出来，下面是demo：
正如您在 GIF 开头所看到的，我最初在选择要检查它的元素时遇到了困难，因为一旦键盘被移除，它就消失了。 但是，如果我在脚本可见时停止脚本，它会保持可见状态，以便我可以正确检测到它。 事实上，如果该元素只是一个简单的 CSS:hover 效果css工具，那么我可以使用“样式”面板的“ToggleElementState”（：hov 按钮）来切换状态以使其显示。 但在 JavaScript 切换样式的情况下，停止脚本实际上是获取其 CSS 样式的最佳方法。
使用 CSS 选择器查找元素
您似乎知道可以使用外部功能（CTRL+F 或 CMD+F）在“元素”面板中搜索元素。 但看看“查找”栏，它会给你以下提示：
正如我在屏幕截图中指出的，您可以通过字符串、选择器和 XPath 查找元素。 我一直在使用字符串，直到最近我意识到我可以使用选择器。

您不必使用在 CSS 中使用的选择器，它可以是任何有效的 CSS 选择器。  find 函数会告诉您选择器是否匹配任何元素。 这对于查找元素以及测试选择器是否有效非常有用。
下面是一个使用 body>div 选择器搜索并遍历 body 的所有直接子 div 元素的演示：
如上所述，可以使用任何合法的选择器来完成此搜索，类似于 JavsScript 的 querySelector() 和 querySelectorAll() 技巧。
直接编辑盒子模型
盒模型是您开始使用 CSS 时首先要学习的内容之一。 由于这是 CSS 布局的重要组成部分，因此开发人员工具允许您直接编辑盒模型。
如果您检查页面上的元素，请单击左侧面板中“样式”面板旁边的“计算”面板。 您将看到元素的可视化盒模型表示以及每个部分的值：
其实你不知道，你可以通过双击任意编辑它们的值：
所做的任何修改也会以与在“样式”面板中编辑 CSS 时相同的方式反映在页面上。
在样式面板中增加或减少属性值
您可能已经知道可以在“样式”面板中编辑 CSS。 只需单击属性或值，然后输入您的修改即可。
但您没有意识到的是，值可以通过不同的方式递增或递减。
您还可以使用 PageUp 或 PageDown 按钮代替箭头键。

源面板的文本编辑器功能
您可能比其他任何地方都更熟悉“样式”面板中的编辑，但“源”面板是开发人员工具的一个被高估的功能，它模仿常规代码编辑器和 IDE 的工作方式。
以下是您可以在“源”面板中执行的一些有用的操作（打开开发人员工具并单击“源”按钮）。
使用 CTRL 键进行多项选择
如果需要选择单个文件中的多个区域，可以通过按住 CTRL 键并选择所需内容来完成此操作，即使它不是连续文本。
在前面的演示中，我在“源”面板中选择了 main.css 文件的任意三个部分，然后将它们粘贴回文档中。 据悉，你还可以使用多个光标同时在多个地方进行输入，只需使用CTRL键点击多个位置即可。
使用 ALT 键选择列
有时，您可能希望选择一列文本，但通常很难做到这一点。 大多数文本编辑器允许您使用 ALT 键来执行此操作，“源”面板也是如此。
使用 CTRL+SHIFT+O 通过 CSS 选择器搜索元素
在“源”面板中打开文件后，按 CTRL+SHIFT+O 组合键打开一个输入框，可让您跳转到任何位置。 这是 Sublime 的一个众所周知的功能。
按 CTRL+SHIFT+O 后，您可以输入要在此文件中查找的元素的 CSS 选择器，开发者工具将为您提供匹配选项。 单击可跳转到文件中的指定位置。
Chrome 和 Firefox 的响应式设计功能
您似乎已经看到一些网站只需点击几下即可测试响应式布局，不过您也可以使用 Chrome 的设备模式执行相同的操作。
打开你的开发者工具，点击左上角的“Toggledevicetoolbar”按钮（快捷键CTRL+SHIFT+M）：
正如您所看到的，设备工具栏有多个选项可以根据设备尺寸和设备类型来修改视图，您甚至可以通过自动调整长度和高度值或在图层区域中拖动操纵杆来自动完成。
Firefox 附加组件“@mediarules”面板具有类似的功能，允许您从站点的样式表中单击断点。 您可以在下面的演示中听到我在我的网站之一上使用它。
开发者工具的颜色特性
在CSS中处理颜色值是常态。 开发者工具允许您更轻松地编辑和测试颜色值。 您可以执行以下操作：
对比
首先，开发者工具具有查看辅助功能的功能。 当您在“样式”面板中看到“颜色”属性值时，可以单击颜色值后面的小方块来打开颜色选择器。 在颜色选择器上方，您将看到“对比度”选项，指示您选择的文本颜色是否与背景具有可访问的对比度。
正如您在演示中看到的，颜色选择器在色谱中显示弯曲的白线。 这条线表示最小可接受对比度的开始和结束位置。 当我将颜色值移动到白线上方时，对比度旁边的绿色勾号消失，表明对比度较差。
调色板
除了查看辅助功能之外，您还可以访问不同的调色板，包括 MaterialDesign 调色板和与当前查看的页面关联的调色板。
切换颜色值语句
最后，开发人员工具中一个鲜为人知的花絮是，您可以在查看颜色值时切换颜色值的语法。 默认情况下，“样式”面板将显示用 CSS 编写的颜色的句型。 并且开发者工具可以让你按住shift，点击颜色值旁边的方块，可以在hex、RGBA和HSLA之间切换颜色值的句型：

编辑 CSS 阴影
text-shadow和box-shadow的CSS写起来比较枯燥，而且句型很容易忘记，而且两个shadow的句型略有不同。
Chrome 的开发者工具允许您使用可视化编辑器方便地添加文本阴影或框阴影。
如演示中所示，您可以使用“样式”面板中任何样式右下角的选项栏向任何元素添加文本阴影或框阴影。 添加阴影后，您可以使用可视化编辑器编辑各种属性值。 通过单击属性值旁边的方块，可以将现有阴影带回可视化编辑器。
Firefox 的网格布局检测器
如今大多数常用的浏览器都支持网格布局，并且越来越多的开发人员将其作为默认的布局方法。  Firefox 的开发者工具现在在“布局”选项卡中提供了“网格”选项。
此功能允许您启用全覆盖网格，以帮助可视化网格布局的不同部分。 您还可以显示行号、区域名称，甚至选择无限扩展网格线 - 如果这对您有用的话。 在示例演示中，我使用 JenSimmons 的示例网站，该网站是响应式的，因此当布局因不同层而发生变化时，您可以听到有用的视觉网格。
适用于 Firefox 的 CSS 过滤器编辑器
过滤器是另一个新功能，几乎联通和PC都支持。  Firefox 再次提供了一个方便的小工具来帮助您编辑过滤器值。
一旦你的代码中有了过滤器（提醒：如果你不知道实际的句型，可以先写filter:none），你会注意到在过滤器的左侧有一个黑白堆叠的小方块。过滤器值，单击它可以打开过滤器编辑器设备。
您可以向各个值添加不同的过滤器、删除各个过滤器值或拖动过滤器以重新排列其层次结构。

在 Chrome 的样式面板中编辑 CSS 动画
在 Chrome 的“样式”面板中编辑静态元素很容易，但是编辑使用动画属性和 @keyframes 创建的动画怎么样？
在开发者工具中编辑动画有两种方法。 首先，当您在“元素”面板中检查某个元素或选择某个元素时，该元素的所有样式都将显示在“样式”面板中 - 包括定义的 @keyframes。 在下面的演示中，我选择了一个要动画的元素，然后调整了一些关键帧设置。
但这还不是全部，Chrome 的开发人员工具提供了一个动画面板，允许您使用可视时间轴编辑动画及其各个部分。 您可以点击开发者工具右上角的“CustomizeandcontrolDevTools”按钮（三个垂直点按钮），选择更多工具，然后打开动画面板。
如上所示，您可以编辑每个动漫元素的时间线，然后编辑完成后，您可以浏览动漫以查看页面上的修改。 对于设计和调试复杂的 CSS 动画来说，这是一个很酷的功能！
在开发者工具中查看未使用的 CSS
如今有大量工具可以帮助您追踪特定页面上未使用的 CSS。 这样您可以选择完全删除它们或仅在必要时加载它们。 这将带来显着的性能优势。
Chrome 允许您通过开发者工具的“覆盖范围”窗格查看未使用的 CSS。 这个面板可以通过点击上面提到的开发者面板右上角的“CustomizeandcontrolDevTools”选项（三个垂直按钮），选择“更多工具”，找到“Coverage”来打开。
如演示所示，打开 Coverage 面板后，您可以在 Sources 面板中打开源文件。 当文件打开时，您会注意到 CSS 文件中的每个样式两侧都有红色或黑色线条，指示该样式是否应用于当前页面。
总结
您的浏览器开发工具是 CSS 编辑和调试的宝库。 当您将上述建议与 Workspaces（允许您将开发人员工具中所做的更改保存到本地文件）等 Chrome 功能相结合时，整个调试过程将变得更加完整。
我希望这种方法和建议能够提高您在未来项目中编辑和调试 CSS 的能力。
如果您发现翻译有错误或者其他需要改进的地方，欢迎您前往鹈鹕翻译项目对翻译和PR进行修改，也可以获得相应的奖励积分。 文章开头的本文永久链接是本文在GitHub上的MarkDown链接。
							
							

							

		 收藏 (0)		
	     打赏
    
    

        

        	
            
    		
感谢您的支持，我会继续努力的!
        
        

            

            	

            		
            	
        	    
打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
        	
    	
    
        
		
		 点赞 (0)
	
		
	




	

		

	    
悟空资源网  css  css盒-你对现代CSS了解多少  https://www.wkzy.net/game/129567.html
	




	

		csscss样式表css选择器css颜色前端开发