Navigation menu

0755-82192581
  • Contact us
  • 0755-82192581
  • 深圳市罗湖区嘉宾路深华商业大厦9楼(地铁1号线国贸站B出口既是)

    3375726676@qq.com


    © 2007-2021 All Rights Reserved.
  • 策略型高端网站设计公司

    Strategic advanced website design company

    View More
  • 2023年网站建设CSS更容易写的几种方式

    时间:2023-11-29  作者:GARY  来源:https://www.niegoweb.com/
    随着CSS不断创新发展,网站建设迎来了变革性的改变。新的特性、技术、实验和想法向我们袭来,其程度是自“CSS3”以来从未见过的。当你的职业似乎以极快的速度前进时,很容易感到不知所措,但同样容易为一年前还不存在的今天的可能感到兴奋和鼓舞。


    高端网站定制

    CSS变得比写起来容易多了,这并不是因为一个改变一切的热门新功能——比如层叠层或新的色彩空间——而是有多少新功能共同努力让我的风格更简洁,更有弹性,甚至有点防御性。这里有一个快速点击。而不是链接:hover和:focus状态,用逗号分隔,使用较新的:is()伪类使它成为可读性更好的一行程序:
    /* Tradition */
    a:hover,
    a:focus {
      /* Styles */
    }

    /* More readable */
    a:is(:hover, :focus) {
      /* Styles */
    }
    这是个经典的例子吧?可以说,将元素对齐父容器中心的“传统”方法通常是显而易见的。我们伸手去拿一些不同的margin: auto从各个方向向内推动一个元素,直到它垂直位于中间。这仍然是一个非常有效的居中解决方案,因为margin速记看各个方向。但是说我们只需要在在一条直线上的方向,如左和右,当在默认的水平从左到右书写模式下工作时。这就是“传统”方法有点失败的地方。

    也许“分崩离析”是重手。更多的是它需要放弃多才多艺margin速记和达到两个特定的组成属性,增加了一行开销。但是,多亏了这个概念逻辑属性,我们又多了两个人手margin品种:一个适合街区方向和一个在一条直线上的方向。因此,回到只需要在内联方向进行对中的情况,我们现在有了这个来保持效率:

    你知道还有什么吗?这个例子实现了从物理属性到逻辑属性的微妙转换,这个简单的事实意味着这个小片段和抛出一样有效margin: auto并能适应书写模式的变化。如果页面突然发现自己处于垂直的从右到左模式,当行内方向向上和向下流动而不是向左和向右流动时,它仍然通过自动使元素在行内方向居中而保持不变。

    对于CSS来说,有两件事是非常新的,我非常喜欢:字符长度单位(ch)和text-wrap: balance.就前者而言,我喜欢它确立了容器的最大宽度,尤其是那些用来存放长格式内容的容器。传统观点告诉我们,一行文本的理想长度是每行50-75个字符,取决于您的来源。在一个字体大小可以适应容器大小或视口大小预测一行中有多少字符是一个移动目标的猜谜游戏。但是如果我们通过ch在较小的上下文中,这不再是一个问题,我们可以确保在任何断点都有一个舒适的读取空间——没有介质。

    标题也是如此。我们并不总是有我们需要的信息——字体大小、容器大小、书写模式等等——来产生一个平衡的标题。但你知道谁知道吗?浏览器!使用新的text-wrap: balance值允许浏览器决定何时以某种方式换行,以防止在多行标题中出现孤立单词或严重不平衡的行长度。这是我们等待完整浏览器支持的另一个例子(在这种情况下,Safari).尽管如此,这也是我现在作为一种渐进的增强投入生产的事情之一,因为有或没有它都不会有负面的后果。

    我知道曾经有一段时间我们中的一些人公开质疑如今“太多”的CSS并认为进入CSS的学习曲线正在成为新前端进入的一个困难的障碍。你发现自己在使用哪些新功能,它们是否帮助你以新的不同的方式编写CSS,使你的代码更容易阅读和维护,或者“重新学习”你对样式的看法。

    相关案例

    OTHER CASE