每天，我都会看到人们使用Javascript来做一些旧HTML默认支持的事情；CSS。那'；这通常是个坏主意——它'；它的速度要慢得多，可能会导致加载后内容在页面上跳转，并为浏览器糟糕的用户破坏网站。我决心做得更好，在没有任何客户端Javascript的情况下创建了这个登录页和博客。
一路上，我发现CSS能提供多少功能，我'；I’我很乐意今天与大家分享其中的一些。我知道很多人都有点害怕CSS，并且认为它是黑魔法，所以我赢了'；不要给你看太复杂的东西。相反，我'；我只想专注于简单的技术和被忽略的特性——这些东西你可以很容易地融入到你自己的网站中。
您可能知道可以使用CSS设置HTML元素的动画。然而，你知道吗，你也可以用完全相同的方式为SVG设置动画？我最喜欢的技术之一是将stroke dasharray属性设置为高值，然后设置stroke dashoffset动画。这导致路径为'；绘制'；随着时间的推移，或者一条线沿着一条路径移动，就像在一些烟花的动画中：
svg{:20em；：100%；：暗灰色；：2em；}svg:global（*）{：无限；：线性；：10s；填充：透明；笔划线条帽：圆形；笔划线条连接：圆形；}。飞行{stroke:gold；stroke-:2；stroke-dasharray:10100；stroke-dashoffset:10；：飞行；：放松；}@关键帧飞行{stroke dashoffset:10；}21%，{stroke dashoffset:-80；}。爆炸{填充：橙色；：0.8；：模糊（1px）；：中心；：爆炸；}@关键帧爆炸{，19%{：比例（0）；}20%{：比例（1.5）；}22%{：标度（0.5）；}23%{：标度（0.8）；}25%{：标度（0.2）；}26%{：标度（0.4）；}35%，{:scale（0）；}。trail{stroke-:2；stroke dasharray:11051050；：trail；：ease out；}@关键帧轨迹{，20%{stroke-:3；stroke dashoffset:80；}100%，{stroke-:0.5；stroke dashoffset:-150；}
关于如何使用CSS创建动画图表的另一个更高级的示例，请查看我们的登录页！“如何工作”部分包含详细的动画。如果你想从中复制，Lexoral在GitHub上是开源的。
制作这样的动画肯定比简单的视频更复杂。如果你能超越复杂性，你会发现'；选择动画SVG有很多原因：
如果你想了解更多关于CSS动画的知识，我建议你从MDN指南开始。要创建SVG，可以使用像Inkscape这样的可视化编辑器，也可以使用像这样更面向开发人员的工具。通常是'；手工编写SVG标记更容易，在这种情况下，MDN有一个很好的参考页面。
你想要一个侧边导航栏，当它'；它不在使用中。把脚本文件收起来，我们'；我有CSS。我们'；默认情况下，我们将使用transform将其移出屏幕，然后在用户将鼠标悬停在元素上时覆盖它。重要的是，当您使用Tab键选择菜单中的一个链接时，我们也应该显示菜单——这是保持网站可访问性的重要一步：
选项1选项2选项3选项4← 悬停（或使用标签）。容器{hidden；：relative；：15em；：25em；：auto；：0.2em纯黑色；}{:flex；：column；：absolute；：100%；：1em；：天蓝；：translateX（1em）；：0.2s transform；}：悬停，焦点在{translateX（100%）；}{pre；：black；}{:2em；：center；}
这个例子只是在CSS中巧妙地使用了伪类。您可能跳过了该链接，但请返回并单击它。即使你认为自己对CSS了如指掌，也可以点击它并阅读下面的伪类列表。看看有多少。想想你可以如何使用它们。
它'；它太容易看到：悬停并假设它'；这只是为超链接设计样式。我们'；我刚刚看到它用来创建一个侧边栏，但在这里'；还有9种使用方法：
制作'；拒绝饼干'；当人们试图点击按钮时，按钮会移开
最后一个是个笑话。请不要'；我不能那样做。我'；我是认真的。如果你那样做，我拒绝承担责任。请
其中一些想法需要一段时间才能激活悬停效果——如果你每次在链接上滑动鼠标时，弹出窗口遮住了半个屏幕，那么使用维基百科是相当困难的。在这种情况下，您可能不得不退回到使用Javascript，但请先尝试transition delay属性。
PSA：位置：粘性；现在已经存在了。请停止用Javascript重新实现它。你们中的一些人不明白为什么我'；我要说的是这样一个基本特征。如果是'；是你，跳到下一节。
你们中的一些人不知道我'；我说的是，而且感觉很自我意识。当你想要一个HTML元素在滚动页面时向下移动时，你可以用简单的CSS来实现！不仅如此，它实际上比Javascript版本工作得更好：
向下滚动页面，观看蓝色方块🡖 蓝色方块跟随你滚动过去，如果你向上滚动，它会回到原来的位置。滚动条{25em；：10em；：auto；：1em；：0.2em纯黑色；：auto；}{:5em；}。正方形{5em；：5em；：lightskyblue；：auto；：sticky；：2em；}
请注意，当你向下滚动时，蓝色方块始终处于完全相同的位置。它'；当有人试图DIY他们的粘性定位时，很容易判断，因为滚动时元素总是落后一帧。向下滚动的速度越快，屏幕就会越高。然后，当你停止滚动时，它会跳到正确的位置。
粘性定位是相对定位和固定定位的结合。它'；它主要用于导航菜单，当你向下滚动页面时，它会跟随你。它'；如果你在一个大的横向屏幕上观看，它也会出现在这个页面上。右边的面板上有我的脸，使用了粘性定位，意思是我'；当你读我的博客时，我总是盯着你看。
要使用粘性定位，首先需要设置position:sticky，并提供一些（通常只有一个）顶部、右侧、底部和左侧的距离。当元素在屏幕上滚动超过该位置时，它会切换到固定位置，并开始跟随您。如果你向后滚动，它会回到原来的位置并保持不变。他们没有'；然而，我不会永远跟随你——一个粘性元素永远不会离开它所包含的元素。
它'；这有点难理解，但我'；d建议通读有关position属性的MDN文章。我一直在使用position，所以我认为它'；It’充分了解所有可能的价值观及其作用是值得的。
手风琴菜单通常用于常见问题解答，其中有一个标题列表，每个标题都可以展开以显示其中的内容。这是我告诉你HTML+CSS的一个基本特性的另一个例子，但是<；细节>；存在：
因为它的每一部分都可以扩张和收缩，就像手风琴一样。如果你没有'；我不知道手风琴是什么，想象一下一只可爱的毛茸茸的猫。你还是赢了'；我不知道是什么，但至少你'；我会因为不知道而感觉更好。
不，除非你'；我们正在设计MySpace个人资料。这个<；细节>；元素很酷，你可以用它做很多事情。我'；我在下面的页面上使用它，显示每个示例的代码！
>；元素很酷，你可以用它做很多事情。我'；我在用
>；元素很酷，你可以用它做很多事情。我'；我在用
<；div class="；集装箱">；常见问题解答为什么它被称为手风琴菜单？因为它的每一部分都可以扩张和收缩，就像手风琴一样。如果你没有'；我不知道手风琴是什么，想象一下一只可爱的毛茸茸的猫。你还是赢了'；我不知道是什么，但至少你'；我会因为不知道而感觉更好。嗯？呵呵。如果我用手风琴菜单会让我酷吗？不，除非你'；我们正在设计MySpace个人资料。{"；"；}</代码>；元素很酷，你可以用它做很多事情。我'；我在下面的页面上使用它，显示每个示例的代码。容器{1em 2em；：0.2em纯黑色；：2em；}{:0.1em纯黑色；：1em；：1em；：1em；：1em；}{:1.2em；：指针；}
它'；使用手风琴菜单并不总是一个好主意，因为它们有很多可用性问题。然而，<；细节>；当你想对用户隐藏一些内容时，元素非常有用，尤其是当它'；它很长，大多数用户都赢了'；我不想看。例如，我使用了上面的一个来隐藏示例的源代码。
如果你'；如果您不确定是否要使用详细信息元素，请尝试阅读NHS服务手册。他们'；我做了比以往任何时候都多的可用性测试，并且有一些合适的指导原则来说明何时进行可用性测试；它适合使用。
纯CSS方法的一个缺点是，在没有Javascript的情况下，细节很难动画化。它'；只要知道盒子打开时的高度，就可以使用“transition”设置盒子打开的动画。目前，浏览器没有'；t本机不支持为关闭的元素设置动画，因此'；我们必须恢复到Javascript或自定义的输入/输出动画。
你可以在你的网站上使用完全功能性的暗模式，而不需要任何Javascript、cookie或单独的URL——所有这些都在浏览器中。秘密成分是：checked——一个只匹配选中复选框的CSS选择器。你可能会看到这是怎么回事：
黑暗模式这是我的网站，我把我的文字。我希望你喜欢。我现在已经用完了我所有的文本预算，一个也没有了，再见。
这是我的网站，我把我的文字。我希望你喜欢。我现在有
这是我的网站，我把我的文字。我希望你喜欢。我现在有
黑暗模式我的网站这是一些文字这是我的网站，我把我的文字。我希望你喜欢。我现在已经用完了我所有的文本预算，一个也没有了，再见。容器{：相对；：0.2em纯黑色；：25em；：自动；}。主体{:1em；}，{：绝对；：0.5em；：0.5em；：2em；}{:1.2em；}。标题{:0；}#exampleCheckbox:checked{whitesmoke；}#exampleCheckbox:checked~{:whitesmoke；}#exampleCheckbox:checked~。身体{：深灰色；：白烟；}
这实际上是一种更通用的技术，可以在任何时候让用户在一个元素的两个不同版本或两种不同样式之间切换。例如，我在上一篇博文中使用它在不同版本的代码片段之间切换。
诀窍是将：checked伪类与~sibling combinator组合。像p~A这样的CSS规则适用于所有<；a>；具有<；p>；元素在HTML文档中位于它们之前。
实际使用的规则是#exampleCheckbox:checked~。body-仅当选中复选框时，才会将某些样式应用于body类。由于受影响的元素必须是后续的兄弟，我们可以'；t在body元素中放置暗模式复选框。相反，我们将其放在body元素之前，然后使用position:absolute将其放在内部。
这不是'；这也不仅仅是一个玩具的例子。浏览器将自动记住复选框状态，这意味着您可以保存用户'；s对免费的偏好-尝试勾选框并刷新此页面！使用复选框进行样式设置非常有用，而且比定制的Javascript解决方案更易于访问。
它'；学习HTML/CSS的来龙去脉让人望而生畏。当你确切地知道自己想要它做什么，但却能'；我不知道怎么告诉电脑。然而，它'；现在比以往任何时候都更容易让网站看起来很棒。CSS已经有了20年的发展历史，并且充满了让生活更轻松的新功能。如果你想进一步阅读，请查看：
我'；我提到的这些技术都是相当新的，这意味着如果你需要支持Internet Explorer，这些技术可能不是'；这不是给你的。例如，position:sticky and:focus inthearen'；I'；我们在这里使用的浏览器几乎100%支持！
不管怎样，我想我'；我已经展示了当你真正伸展自己时，CSS的强大功能。这篇文章的重点绝不是让你只复制我的示例代码，尽管你可以随意这么做。相反，它'；让我们为您提供一些关于该语言更有用部分的指导，并鼓励您探索web开发的更基本部分。