"I love W3cplus"

2022-05-05 11:10:15

跳转到主要内容 w3cplus Menu 会员专栏CSSJavaScriptVueMobileReactSVG标签云文章列表 CSS 的父选择器:has() 作者：大漠 日期：2022-04-28 点击：224 CSSCSS选择器会员专栏 W3C 的 Selectors Level 4 新增了很多强大的 CSS 选择器。早在 2018 年年底就在《初探CSS 选择器Level 4》一文中和大家一起探讨了这些选择器。在这些新选择器中，最为有意思的是“逻辑组合选择器”，即 “任意匹配伪类选择器:is()、否定（匹配无）伪类选择器:not()、选择器权生调整伪类选择器:where()和关系性（父选择器）伪类选择器:has() 。尤其是关系性伪类选择器:has()，它和 CSS 容器查询在近十多年来一直成为 Web 开发者期待的 CSS 功能之一。在这篇文章中，我将和大家一起来探讨什么是关系性伪类选择器（又称父选择器）以及它是如何工作的，并且将会通过一些示例来阐述该选择器可以在哪里，最重要的是我们现在如何使用它。 阅读全文 下一代响应式Web设计：组件驱动式Web设计 作者：大漠 日期：2022-04-13 点击：399 ResponsiveCSS容器查询布局Layout 自从著名设计师 Ethan Marcotte（@beep）在 A List Apart 上发表了一篇名为《 Responsive Web Design 》的文章之后，响应式网页设计（RWD，即 Responsive Web Design）的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特性，近两年尤其如此（详细请参阅《2022 年的 CSS》一文）。这些变化，对于响应式Web设计的开发也有较大的改变。Una Kravets（@Una）大神，在2021的Google I/O 大会上的分享，提出 新的响应式：组件驱动式 Web 设计。 Web 生态即将进入响应式 Web 设计的新时代，并转变我们对其含义的看法，也为会Web设计带来新的变化。组件式驱动 Web 设计（或开发）也被称为是下一代响应式 Web 设计（或开发）。如果你对这方面话题感兴趣的话，请继续往下阅读。 阅读全文 如何编写防御式的 CSS 作者：大漠 日期：2022-01-19 点击：1566 CSSCSS技巧 自 @Ahmad Shadeed 去年在博客上发表了《The Just in Case Mindset in CSS》的时候，我自己也有一种冲动，也想整理一篇这方面的文章，但一直未动笔（说实话，整理一篇这样的文章真的很费时间）。去年年底在内网看到 @克军 老师发了一篇有关于“防御式CSS开发”的文章（外网 @Ahmad Shadeed 同样发了一篇有关于"防御式CSS开发"）之后，这种冲动就更大了。我想我也应该写一篇这方面的文章。希望大家能从文中获益！ 阅读全文 图解CSS：CSS阴影 作者：大漠 日期：2022-01-11 点击：1281 图解CSSCSSbox-shadowtext-shadowfilter会员专栏 在现代 Web 中，阴影已经成为主要设计要素之一，甚至是随处可见。 阴影增加了质感、透视、并强调物体的尺寸。在 Web 设计中，使用光和影子可以增加物理上的真实感，并且可以用来制作丰富的、可触摸的 UI 界面。从 CSS 技术角度来说，在 Web 中给 UI 添加阴影效果有多种不同的技术方案，但从实现阴影效果的 CSS 属性来说，常见的主要有 text-shadow（文本阴影）、box-shadow（盒子阴影）和 filter的drop-shadow()（不规则阴影）。今天，我们就一起来聊聊 CSS 这方面的特性。 阅读全文 2022 年的 CSS 作者：大漠 日期：2022-01-01 点击：1919 CSSCSS新特性 虽然近些年 CSS 变化很快，但我认为 2021 年是 CSS 的元年。在即将过去的 2021 年，CSS 变化非常地大，其中新增了很多特性，比如 CSS 容器查询、CSS 父选择器、CSS 层叠控制规则、CSS 子网格等等。而且这些特性已经在个别，甚至是在大部分主流浏览器已经可以看到了。几大主流浏览器（Chrome、Firefox、Safari和Edge）还专注于修复浏览器兼容性痛点，让 Web 开发者的工作变得更轻松。​ 阅读全文 CSS 选择器:is() 和 :where() 与 :has() 有什么功能 作者：大漠 日期：2021-12-25 点击：1551 CSS伪类选择器CSS选择器选择器会员专栏 对于 CSSer 而言，CSS 选择器是 CSS 领域最基础不过的知识了，他虽基础，但在给元素设置样式，选择器是不可或缺的。正所谓，“众里寻他千百度，蓦然回首，那人却在灯火阑珊处”！在 Web 开发中，我们需要通过选择器的能力，在众人中找到想找到的人。话又说回来，选择器虽然简单，但它却很重要，就从 W3C 规范中有关于选择器版本的迭代中也能说明这一点（现在已经是 Level 4 版本了）。事实上，早在2018年年底我就在《初探CSS 选择器Level 4》一文中和大家一起探讨了在选择器 Level 4 中新增的选择器。 阅读全文 CSS 中的条件圆角技巧 作者：大漠 日期：2021-12-22 点击：589 CSSborder-radius会员专栏 CSS 的 border-radius 技术已经是非常成熟的技术了，在现代 Web 开发的过程中，实现圆角的效果都是使用 border-radius 来实现。使用 border-radius 来给一个盒子添加圆角效果已经是最为常见，最简单的技术了，但前段时间在 Twitter 上看到 @Ahmad Shadeed 发的一条推特信息说：“Facebook 应用在border-radius上使用了 CSS 的比较函数（比如 min()和max()）来实现按条件给元素设置圆角效果”。这一说法并得到了 Facebook 的工程师 @Frank Yan的确认。Facebook 的工程师使用了一种被称为 “Fab Four” 技术，可以让圆角根据一定的条件来设置不同的值。不知道你是否对该技术感到好奇呢？CSS 是如何有条件地将border-radius设置不同的值。如果您感兴趣的话，请继续往下阅读。 阅读全文 响应式图片使用指南(Part4) 作者：大漠 日期：2021-12-19 点击：316 CSSResponsivesrcsetimage-setpicture会员专栏 前面我们花了较多的篇幅围绕着 HTML 的 和 元素是如何构建响应式图片。在 标签元素上可以使用 srcset 和 sizes 属性大不同环境下提供不同尺寸的图片；在 中使用 ，并且结合media、srcset、sizes和type等属性可以为用户提供不同图片（环境不同提供不同的图片）和不同类型图片（type指定图片类型）等。但在 Web 开发中，很多时候还会使用背景图片（background-image）、边框图片（border-image）和蒙板图片（mask-image）等。我们接下来围绕着 CSS 中的背景图片（background-image）来展开，换句话说，在background-image中是否也可以像 和 一样，根据用户环境来提供不同的图片。 阅读全文 响应式图片使用指南(Part3) 作者：大漠 日期：2021-12-17 点击：268 ResponsivesrcsetpictureCSS会员专栏 这是有关于响应式图片使用的第三部分，在第一部分中主要和大家一起聊了些和响应式布局相关的概念和术语；第二部分主要和大家聊的是新增属性srcset和sizes如何让我们根据用户代理环境加载不同尺寸的图片。而今天将和大家一起探讨 HTML5中的元素又是如何帮助我们根据用户代理的环境加载不同的图片。如果你对这方面感兴趣的话，请继续往下阅读。 阅读全文 2022年不能再错过 CSS 网格布局了 作者：大漠 日期：2021-12-13 点击：1895 CSSGridLayoutWeb布局系列布局 时至今日，可用于现代 Web 布局的特性非常的多，可能大家最为熟知的还是 Flexbox，都觉得 Flexbox 布局可以一把梭。虽然说 Flexbox 布局已非常强大了，但他始终还是一维布局，对于一些二维布局的场景，他还是有很大的极限性。这也从侧面说明现代Web布局中或未来的布局方案中还是离不开 CSS Grid，毕竟到目前为止，他是唯一一个支持二维布局的技术。在 2021 年我花了几个月的时间，涉及到 CSS Grid 的都理了个遍，通过二十多篇文章来阐述 CSS Grid。可以说，这个系列算得上是全网较为系统介绍 CSS Grid 的了。如果我还未接触过，或对 CSS Grid 有一定的恐惧，那么这个系列值得你花时间阅读。 阅读全文 页面123456789…下一页 ›末页 » 关于我们 W3cplusW3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文；其文章范围广泛，主要以CSS、HTML、JavaScript、A11Y、动画等教程为主。 关于站长 大漠常用昵称“大漠”，W3CPlus创始人，目前就职于淘宝。对HTML、CSS和A11Y等领域有一定的认识和丰富的实践经验。现在主要从事智能UI领域的探讨和学习！。CSS和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。github twitter  我的作品 图解CSS3本书是历时2载的心血之作，根据最新的CSS撰写，融入了作者在CSS领域多年的使用经验，旨在将本书打造成为CSS领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。新版在《图解SS》中持续更新！ 湘B2-20110104-7，衡阳市雅米信息技术有限公司 © 2011-2022 W3CPLUS，感谢Drupal开源技术。感谢七牛云存储提供静态资源空间。 返回顶部