跳到主要内容

关于CSS的5件事你从来不知道

Text featuring the word CSS with each of the letters broken up into component parts
(形象信用:未来)

很长一段时间以来,CSS并没有包含大量的惊喜。该语言以悠闲的速度进行开发,它满足于对字体进行样式化和浮动div,而JavaScript等语言则做了许多繁重的工作。

然而,近几年来,该语言经历了中年的复兴,其W3C工作组在现代发展领域为它开辟了更多的房地产。不管你是否把反应网站布局,精心制作的动画或构建像素完美的组件,css现在有了巨大的马力在它的引擎盖下。但是,虽然这为您提供了一个全新的工具包来设计您的站点,但这确实意味着您很容易错过新的技巧,您可以将这些技巧合并到您的开发工作流程中。

今年4月,在Generate New York,我们的观众有机会直接从业内一些最优秀、最聪明的CSS专家那里学到一些技巧,比如Mozilla的设计师和开发者倡导者以及CSS工作组的一名成员。仁西蒙斯

但是我们不想囤积这些黑客,我们想和你分享它们,并向你展示一些西蒙斯教我们帮助你的CSS游戏的整洁的东西。你可以看下面的全部谈话,也可以继续看关键的外卖。

01.创建css网格布局很容易

好吧,我们可以肯定的是,现在很多人已经收到了这条信息。但是,正如西蒙斯的谈话所表明的那样,电网是布局你的网站的一种非常聪明的方式。首先,建立初始网格是一种简单的方法。想要创建一个简单的12列网格来开始布局您的核心div和组件吗?您所要做的就是告诉网格重复12列,每列都是网格的等份:

示例-网格{显示:网格;网格-模板-列:重复(12,1FR);}

与其随波逐流,放置元素是一件轻而易举的事。假设您想要跨站点中心的div,两边留两列空白,代码再简单不过了:

.示例-div{网格-列:3/11;}

目前为止基本的东西。但西蒙斯的讲话清楚地表明,电网是多么的智能。在定义您希望内容采用的位置之前,CSS网格将自动将内容放置在后续的行或列中,从而更容易查看要构造的元素。或者,假设您已经被困在布局中,而且还没有定义网格;与其让您盯着一个有边界的布局,CSS还会从所使用的最大网格行和网格列值中推断出您的网格应该拥有的行和列的数量。

02.网格一点也不像HTML表

当新事物出现时,总会有人准备批评这种变化。CSS网格也不例外;它当然受到了相当一部分反对者的欢迎,他们声称,这只是对用HTML表格放置站点的陈旧做法的重新加热。

幸运的是,西蒙斯的谈话把这个放到了床上。在过去网页设计的黑暗年代,基于表格的网格是扁平的、僵化的东西。第二,开发人员需要相邻的cels中的两个元素来重叠,它们被迫分解,并将内容保存为静态图像-这感觉不那么老式,更像旧石器时代的东西。

相反,网格不仅允许您堆叠和重叠元素,而且还允许您灵活和响应地这样做:您可以使用网格来指定元素之间的响应和滑动方式,而不是固定的布局。

03.子网格为布局添加了一个全新的层。

如果HTML表是模糊而遥远的过去,网格是现在,那么子网格就是未来。正如你在西蒙斯的演讲中所看到的,网格只是走得这么远-父母上的网格会影响到孩子,但是任何孙辈都不会继承网格。虽然您可以在原始网格中放置一个新的网格,但它不会坚持父网格的行和列,从而导致您很久以前就认为遗留下来的那种凌乱的布局工作。

幸运的是,子网格解决了这个问题,这意味着,如果您愿意,您的布局可以一直向下网格。由于他们坚持由他们的父网格设置的属性,你可以创建一些奇妙的布局,在他们的网格中有一个非常细粒度的控制级别。

04.可变字体是荒谬的多才多艺的。

你也许可以从西蒙斯在她的浏览器开发工具中对它们进行修改的喜悦中看出,可变字体是一件很重要的事情。只需一个变量字体与您的网站,你可以参考几乎无限的重量,跟踪和样式,有效地允许你做繁重的工作,这通常是整个字体系列的保留。总之,一个破解工具时,建立创造性的新布局。

05.CSS分解类型布局

另一个伟大的CSS秘密是它如何灵活地处理类型-一个很好的例子来自西蒙斯的视频。如果您想使用从右向左传递的语言,只需使用属性‘direction:rtl;’使它们以应有的方式出现。或者,假设你希望你的段落的线条顺时针旋转90度,你可以使用‘写模式:垂直-rl’或者‘写模式:垂直-lr’,如果你希望你的第一行出现在左边,后面的每一行都在右边。

虽然对‘垂直-rl’和‘垂直-lr’的支持仍然是混合的,但是在为您的站点添加渐进式样式增强时,这些漂亮的CSS片段值得记住。

在GenerateCSS上了解有关css的更多信息

CSS generate 2019

(图片信用:Getty/未来)

CSS一直在发展,正如你所看到的,总是有很多新的技巧和技巧可供学习。这就是为什么如果你想美化你的设计和提升你的布局,你应该一起来产生CSS,我们专注的网页设计会议,迎合所有的事情CSS,这将于9月26日在伦敦Shoreditch的RichMix举行。

现在抢购你的票是值得的。如果你在8月15日下午5点之前拿到你的,你可以省下50英镑,只付199英镑+增值税。立即购买机票

相关文章:



翻译字数超限