18个最晦涩的CSS技巧& Techniques 2016

根据您的技能和经验,CSS编码有时会成为一场噩梦。所以在这篇文章中,我们收集了一些最有用的&晦涩的CSS技巧,技巧,技术和编码解决方案,可以提高您的效率。

可维护性

MaintenanceableCSS是一种架构和编写CSS的方法,可帮助您和您的团队编写模块化,可伸缩和可维护的代码。如果您曾经经历过维护CSS的痛苦,那么本书可以帮助您避免常见的问题。无论您是1人还是100人组成的小组,我都认为您会在本书中找到有用的建议。如果您的网站在不断发展,那就更是如此。

可维护性

提示

一系列技巧帮助您掌握CSS技能。

提示

必看CSS

这是关于CSS的一些受欢迎的演讲的集合,涵盖了CSS框架,Sass,SVG,动画,可伸缩性,CSS性能,工具,移动技巧等主题。

必看CSS

使用CSS更改光标以获得更好的用户体验

还是’很容易忽略游标及其对我们网站用户体验的影响。还记得当我们了解:: selection是一件事时,每个站点都开始使用它来个性化文本选择的背景色吗?自定义游标同样容易,并且在正确使用时会增加一些低估的作用。

使用CSS更改光标以获得更好的用户体验

的CSS伪类和伪元素的终极指南

在不使W3C的技术定义过于复杂的情况下,伪类基本上是幻象状态或CSS可以针对的元素的特定特征。一些常见的伪类是:link,:visited,:hover,:active,:first-child和:nth-​​child。还有更多,我们将在一分钟内看到它们。

的CSS伪类和伪元素的终极指南

四工厂

我想我找到了一种无需媒体查询即可创建响应式电子邮件的新方法。该解决方案涉及CSS calc()函数以及三个width,min-width和max-width属性。

四工厂

针对大型显示器的优化

必须在任何屏幕尺寸上提供最佳体验。当针对大型显示器优化我们的内容时,我们不应该’不要错过常见的桌面分辨率。通过适当的计划,我们可以在构建响应式网站时利用我们已经可用的工具来扩大规模并调整我们的内容以用于大规模展示。

针对大型显示器的优化

了解CSS对象的Fit和Position属性

在本文中,我们将讨论两个Web开发人员都不了解的CSS属性。它们被称为对象适合度和对象位置,都与图像和视频的样式有关。

了解CSS对象的Fit和Position属性

的CSS element()函数

今天,我想分享一个很棒的CSS功能。但是,在开始之前,让我警告您:目前,我将显示的功能仅在Firefox中受支持,没有其他浏览器供应商对此感兴趣。也许,这可能会在不久的将来改变。

的CSS element()函数

的CSS自定义属性

设计应用程序时,通常的做法是留出一组品牌颜色,这些颜色可以重复使用以保持应用程序外观的一致性。不幸的是,在CSS中一遍又一遍地重复这些颜色值不仅繁琐,而且容易出错。如果某个时候需要更改其中一种颜色,则可以随风而行,并“查找并替换”所有事物,但是在足够大的项目中,这很容易变得危险。

的CSS自定义属性

基本的CSS食谱

今天,我们将讨论CSS中的一些有用技巧。让’s begin with…

基本的CSS食谱

艺术网

使用几行CSS,您也可以为您的Web项目创建可重用的统一过滤器,而无需打开外部程序。

艺术网

的CSS模块

的CSS模块是一个CSS文件,默认情况下,所有类名称和动画名称都在本地作用域内。

的CSS模块

构建和发布功能CSS

由于功能CSS极其重视可重用的微小类,因此生成的样式表必定没有膨胀,从而大大减小了文件大小。反过来,这使我们可以更快地进行传输,减少样式表上的时间和处理,最重要的是,最终用户可以节省时间和金钱。

构建和发布功能CSS

如何使用Stylelint正确地整理Sass / 的CSS

样式表棉绒。这样做的人并不多。应该有更多的人—特别是多样化的团队,他们有很多手接触代码库。在本文中,我将讨论为什么我们应该整理样式表,以及如何将样式表linting插入我们用于普通CSS和Sass的构建管道中。

如何使用Stylelint正确地整理Sass / 的CSS

加载CSS的未来

It’捆绑所有网站是很常见的’的CSS放入一两个资源中,这意味着用户下载了大量不’t应用于当前页面。这是因为网站可以包含多种类型的页面,其中包括“components”,并且在组件级别提供CSS会损害HTTP / 1的性能。这不是’在SPDY和HTTP / 2的情况下,可以以很少的开销传递许多较小的资源并进行独立缓存。

加载CSS的未来

最后,JavaScript中的CSS!认识CSSX

JavaScript是一种很棒的语言。它功能丰富,动态,并且如今与网络紧密相连。用JavaScript编写所有内容的想法听起来不再那么疯狂了。

最后,JavaScript中的CSS!认识CSSX

Flexbox模式

Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build 用户界面 组件. They start out simple and get more complex near the end. You can start using these patterns in your own code right away,

Flexbox模式

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.