提示:当前为默认节点,你可以在后台修改为你想要的站点!

你可以用伪元素做的有趣事情

CSS 中的伪元素能做什么,其实在《伪元素能帮助我们做些什么》一文中就和大家探讨过。我们知道伪元素可以帮助我们 清除浮动制作Icon图标分割线CSS TooltipsCSS计数器 等事情。其实除了这些常见的事情之外,CSS 伪元素还可以帮助我们做一些非常有趣的事情,这些有趣的事情也称得上是 CSS 方面的小技巧吧。接下来,和大家聊聊这方面的话题。

图解CSS: Grid布局(Part19)

CSS Grid 模块的出现以及浏览器对其支持,为 Web 布局提供了前所未有的可能性。我们可以用更少的元素(更简洁的 HTML 结构)构建更复杂的设计。这比我们一直认为非常强大的 Flexbox 要更强很多。但是,当你想到 CSS Grid 时,你一般会想到是我们平时习以为常的方块布局,对吗?@Andy Barefoot他的个人网站Codepen 上提供了很多有创意的响应式布局效果,让你会对 Web 布局有一种焕然一新的感觉,感觉与你的经典 Web 设计(规规矩矩方块布局),而且他使用了 CSS Grid 布局来做到这一点。

图解CSS: Grid布局(Part18)

我们花了很长的一段时间和多篇文章的篇幅和大家一起探讨了 CSS 网格布局模块的特性。从前面这些内容,不难发现网格布局的复杂性,灵活性。我想大家也意识到了,CSS Grid到来之后,Web中设计布局的方法也已经改变了。我们可以在纸上绘制布局草图,思考布局设计的全部内容。当你开始敲击代码的时候,就已经知道布局会是什么样子。正因为CSS Grid布局的复杂性,再加上网格容器上定义的网格是不可见的。为此我们不得不考虑,如何更轻易的使用网格,或者碰到网格布局相关的 Bug,又应如何来调试。熟悉 Web 开发的同学都知道,在调试布局或CSS相关的问题时,喜欢在元素上添加一个边框。在网格布局中,虽然可以使用类似的方法在网格容器和网格项目中添加边框,帮助我们快速的定位;但是我们没法给网格线添加边框。不过庆幸的是,目前主流的浏览器,比如 Chrome、Firefox、Safari 和 Microsoft Edge 浏览器的开发者工具(DevTools)都提供了网格布局审查器。有了这些工具之后,可以快速的帮助我们使用网格,调试使用网格碰到的问题。

图解CSS: Grid布局(Part17)

自从多列布局、Flexbox布局和Grid布局得到浏览器支持之后,就可以使用这些特性来实现 瀑布流的布局 ,但这些技术实现的瀑布流布局都或多或少存有一定的缺陷。不过,值得庆幸的是,CSS 网格布局的第3级(CSS Grid Layout Module Level 3) 将真正的瀑布流布局纳入了 W3C 规范中,称得上真正的瀑布流布局。不过遗憾的是,支持该规范草案的主流浏览器并不多,只有Firefox 和 Firefox Nightly。虽然这个功能还不能用于实际生产中,但你的试用以及使用之后的反馈是很有价值的,这有助于确保它满足你对这种布局的要求。

图解CSS: Grid布局(Part16)

subgrid 进入 CSS Grid 布局模块的 Level 2 规范之前,嵌套网格、subgriddisplay: contents 就有深度的讨论,最终 subgrid 得到更多的支持,也最终成为规范中的一部分。也就是说,嵌套网格 和 display: contents 都可以实现类似 subgrid 的布局。那这一节中,和大家来探讨 display: contentssubgrid 有何差异?

图解CSS: Grid布局(Part15)

当 CSS Grid 布局在 2017 年最初发布时,设计师和开发人员为二维布局和优化布局系统而设计时感到非常兴奋。 通过前面的学习,我们也领略到了网格布局的魅力,CSS 网格让我们可以轻松地做许多以前做不到的事情。其中一个较大的限制是,嵌套的网格不能参与其父网格的大小调整。这也是一个从一开始就被认为很重要的功能,然而,由于其复杂性,一度曾被废弃的子网格被推迟到 CSS Grid布局模块的 Level 2 中。一段时间以来,关于subgrid的使用情况、如何实现它的问题有很多讨论,甚至还有一些关于是否需要它的辩论。很多讨论都是围绕着另外两种可以处理许多与subgrid相同问题的方法:嵌套网格display: contents。接下来,我们将花一些篇幅来阐述嵌套网格和subgrid,即我们将了解哪些是相似的,哪些是subgrid与嵌套网格区别?以及阐述在一些非常有效的情况下,子网格是真正需要的,而在另一些情况下,它并不是严格需要的,但会带来一个更简洁的解决方案。那我们先从嵌套网格开始。

使用 contenteditable 构建 To-Do List

大多数情况之下,Web 中构建 ToDo 列表都是采用 JavaScript 脚本(或 ReactVue这样的 JavaScript 框架)来构建。今天在 Codepen 上看到 @Adir 使用纯 CSS 实现了一个简单版本的 ToDo 列表效果。刚看到这个效果的时候,感到很神奇,纯CSS如何实现这样的效果?为了一探究竟,查看源码之后才发现,实现该效果主要是依赖 HTML 元素的 contenteditable 属性。那么今天就和大家一起聊聊 contenteditable 属性怎么实现 ToDo 列表效果。

CSS accent-color

Web 开发者都有一个相同的共识,要在 HTML 表单元素上定制 UI 风格,相对而言是较为困难的。很多时候,开发者都是通过别的方式来的绕开原生表单控件的使用,比如使用非表单元素来模拟表单控件。这样做的唯一目的就是让表单控件能在各平台上达到相同的 UI 风格。这样做虽然能让表单控件 UI 风格达到一致性,但也会给我们的工作增加很多额外的工作量,除此之外,也会导致表单控件元素状态的样式被丢弃,以及内置的可访问性功能也会丧失。也就是说,要完全重现浏览器提供的功能,可能比你想要承担的工作要多。如果说,能够直接有相应的 CSS 属性让开发者操作表单控件 UI是不是事情就会简单地多,开发者也可以从此避开用非表单控件元素来让表单控件更具个性化 UI。虽然到目前为止,我们还无法直接做到这一点,但 CSS 也在这方面做出很多的改变,比如说,我们现在可以直接使用 CSS 来控制表单元素的重点颜色(Accent Color),一种典型的明亮的颜色。这也就是我们今天要介绍的 CSS 的 accent-color 属性!

图解CSS:奇妙的CSS计数器世界(Part3)

奇妙的CSS计数器世界主要分为三个部分,在第一部分中介绍了 list-style 的基本使用之外,主要是向大家阐述了如何使用 @counter-style 实现自定义的列表项标记符(list-style-type);在第二部分中介绍列表标记框,即伪元素 ::marker的使用以及可用于::marker上的CSS属性。至此,我们可以在::marker::before::after三个伪元素上的content生成内容,来构建更具个性化的列表项标记符。虽然如此,要实现具有计数(或者说编号)的列表项符号样式,还是需要CSS的计数器来助力,即counter-resetcounter-incrementcounter()counters()函数。在接下来的内容,主要围绕着这几个属性展开。感兴趣的请继续往下阅读。

图解CSS:奇妙的CSS计数器世界(Part2)

奇妙的 CSS 计数器世界 第一部分 主要介绍了使用 list-style(以及它们的子属性list-style-typelist-style-imagelist-style-position)属性给列表项设置列表项标记符样式。除此之外,还可以使用 @counter-style 规则来自定义列表项标记符(list-style-type的值)。事实上,每个列表顶的标记符都是::marker伪元素生成的标记框的内容。在这部分中,我们开始进入::marker伪元素世界。感兴趣的请继续往下阅读。

页面

返回顶部
友情链接:小偷程序  镜像站群