网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 网站优化 » 正文

CSS自定义属性改变网站布局和颜色

2019-7-30 16:51:4 | 作者:老铁SEO | 0个评论 | 人浏览

  CSS自定义属性(通常称为CSS变量)一直在稳步进入浏览器一段时间。随着3月份微软Edge 15的发布,现在所有主流的现代浏览器都支持它。

  这意味着对于不需要支持诸如Internet Explorer之类的传统浏览器而不负担的项目,可以考虑使用CSS变量(所有意图和目的) - 安全使用。

  许多开发人员已经使用具有诸如Sass或Less之类的预处理器的变量作为减少代码重复的手段。本机CSS变量的工作方式大致相同,但不需要任何额外的构建步骤,像常规CSS属性一样级联,最重要的是在运行时可用。

  这些优点使本机CSS变量成为其预处理器兄弟姐妹的一个优势,为开发人员打开了大量有趣的事情,而且代码少得多。

  在本教程中,我们将探索如何使用CSS变量实现网站建立到名为NoteApp的模拟Web应用程序。这将涉及编写CSS和JavaScript以允许用户更改颜色方案并切换显示的列数。然后,我们将利用Web Storage API来确保为将来的会话保存任何更改。

  首先,从Web Designer的FileSilo下载项目文件。要做到这一点,去吧FileSilo在本教程旁边选择免费资料和免费内容。注意:首次用户必须注册才能使用FileSilo。

  在“ / website-template ”目录中,您将找到静态NoteApp网页,我们将使用CSS变量和Web Storage API实现网站建设。打开您首选文本编辑器中的目录。

  在 main.css 中,您会发现很多项目的CSS。在顶部,创建一个针对“ root ”伪类的块。在其中定义变量,如下面的代码段。该根块包含全局变量,它将像任何常规的CSS属性一样级联到我们的样式表中。

  通过手动或使用find / replace进行样式表,并从根块中与其对应的变量交换任何静态颜色十六进制代码。为此,请使用var函数并传递变量的名称。这告诉浏览器引用该变量的值。例如:

  打开 index.html ,你注意到的第一件事就是一个大的SVG元素。它包含所有页面的图标的路径,每个图标都包含在符号元素中,并赋予唯一的ID。这些符号在需要时使用 use 元素进行引用,允许重复使用图标而不会重复SVG代码。

  使用内联SVG而不是.SVG文件的一个好处是CSS可以访问其内部结构。这意味着我们的CSS变量(除了Edge,在写作时)。在“ index.html ”中,将SVG的样式块替换为下面的代码段。现在,每个SVG的颜色都链接到我们的CSS变量的值。

  我们也可以为颜色以外的属性使用CSS变量。在根块中创建一个新变量,将其称为“ 列 ”,并赋值为3.这应该与页面上“ 列 ”UI组件的默认值相匹配。功能完成后,此组件将切换列数。

  使用我们的新列变量和calc()函数,我们现在将计算每个音符组件应该多大,以创建正确数量的列。例如,如果列设置为4,则每个音符的宽度应为25%。

  当将JS行为应用于DOM元素时,通过具有JS前缀的类来挂接它。这将元素的功能方面与CSS脱钩。我们为所有的颜色和无线电输入添加一个 js-update-variable 类,并引用一个 data-attribute 来引用要更新的对应变量。

  打开 main.js 并添加下面的代码段。这循环了我们所有的 js-update-variable 输入,并添加了逻辑,所以在更改时,其数据变量属性中引用的变量将更新为输入值。颜色色板和列切换应该现在正在工作!

  只有当用户点击保存按钮时,才能保存用户的配色方案,这样可以让他们尽可能多地尝试主题,而不会自动覆盖当前的配置。要开始,将 .js-save-colors 添加到“ 保存 ”按钮以作为我们的JS钩子。

  返回 main.js ,声明一个名为 colors 的新变量,并分配一个包含所有要保存的所有颜色变量的新数组,一旦保存按钮被点击。

  在colors数组下方,为“ js-save-colors ”类创建一个点击事件侦听器,我们以前添加到“保存”按钮。在其中创建一个名为 htmlStyles 的新变量,并为其分配根HTML元素的计算属性。我们将使用它来访问我们的CSS变量。

  接下来,在事件侦听器中,创建一个名为“ coloursToSave ” 的新变量,并为其分配一个空对象。接下来,使用第11步中的 colors 数组创建一个FOR循环。在其中,我们将把 colors 数组中提到的变量的完整键/值记录添加到 coloursToSave 对象。

  现在我们将所有颜色变量保存在“ coloursToSave ”中,我们将它发送到名为localStorage的Web Storage API的组件。这本质上是一个在会话中持续存在的对象。我们可以使用其 setItem() 方法在其中存储其他对象。我们把它发送给我们的 coloursToSave 对象。

  除了颜色之外,我们还希望确保我们选择的列号在会话中仍然存在。第一步是为列组件中的所有无线电输入添加“ js-update-columns ”。

  对于每个 js-update-columns ,我们接下来分配事件侦听器来监视更改。检测时,我们再将 columns 变量的当前值发送到localStorage,再次使用 setItem() 方法。与颜色不同,我们不需要对该值进行字符串化,因为它不是一个对象。

  如果用户在以前选择颜色和列偏好设置之后返回,我们需要构建逻辑,这样保存的数据就会转回到CSS变量中。第一步是定义一个“ DOMContentLoaded ”事件侦听器,然后使用 if 语句来检查localStorage中使用其 getItem() 方法的任何保存的数据。

  在颜色 if 语句中,创建一个名为“ savedColours ” 的新变量,并从localStorage为其分配解析的颜色对象的值。使用带有“ savedColours ” 的FOR IN循环,抓取每个颜色键/值对,并将其附加到根HTML元素作为CSS变量。

  在我们修改列变量之前,我们必须首先获取对localStorage中保存的数据的引用以及“ Columns ”组件中的无线电输入。后者是我们可以更新其状态,以确保正确的数字是预选的。

  最后,我们将使用其保存的localStorage对应方式更新列CSS变量,并将“ Columns ”组件中相关无线电输入的checked属性设置为true。“ 列-1 ”是为了补偿NodeList列为零的事实。

  而已!模拟NoteApp页面上的所有内容现在都可以正常工作。您可以通过单击色板创建自己的颜色方案,然后通过保存按钮将其提交到localStorage。如果要切换显示的列数,请单击列组件中的相应编号。

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:网站布局  
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。