css完成国际化

前提

在日常处理国际化的时候，通常是将key通过类似intl.xx(key)转换为对应环境的文案，可是如果需要在css中加入对应逻辑应该怎么做呢（比如在after的伪元素中显示不同的文案），毕竟在css中没办法通过js代码将key转换为文案。

思路

1. 既然不能在css中写入翻译过程，那么就把翻译结果写入dom节点中，可以用data属性存放已经翻译好的文案，<div class="suf" data-suffix="翻译的结果"></div>

2. 在css中读出data-suffix的值作为content的内容， 可以使用attr()来获取指定的属性， .suf:after { content: attr(data-suffix)

基于css完成网页的国际化的更多相关文章

  1. 基于CSS+dIV的网页层，点击后隐藏或显示

    一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...

  2. 基于CSS的个人网页

    前端时间做的CSS作业:基于CSS的个人网页 基于CSS的个人网页 效果图: 代码: <!DOCTYPE html> <html> <head> <meta ...

  3. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  4. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  5. 学习笔记 第五章 使用CSS美化网页文本

    第五章   使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...

  6. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  7. Atitit事件代理机制原理 基于css class的事件代理

    Atitit事件代理机制原理 基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...

  8. 基于Css反射形自触发事件，优化你的延时事件

    昨天听w3ctech分享时候,说道orientationchange在不同OS和版本中,存在兼容问题,很多时候触发时候都没有渲染结束,开发同学一般都是基于setTimeout一段时间之后,在去执行具体 ...

  9. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

随机推荐

  1. For循环的几个练习

    1.括号里面只能放加或减,如果要使等式成立,括号里面应该放什么运算符12()34()56()78()9 = 59 2.蓝球弹起的高度篮球从10米高的地方落下,每次弹起的高度是原来的0.3倍,问弹跳10 ...

  2. ES6 之 对象的扩展

    1.Object.is() 判断俩个值是否相等 +0 不等于 -0 NaN 等于自身 console.log(Object.is('foo','foo')); // true console.log( ...

  3. 设计模式讲解4：Bridge模式源码

    声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 桥接模式可以和排列组合关联起来理解,一个对象有多种不通种类的属性,如attributeA1,attribu ...

  4. 解决XML警告"No grammar constraints (DTD or XML Schema) referenced in the document"

    解决办法: 顶部有这两行信息即可解决警告: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...

  5. gulp 学习入门

    const gulp = require('gulp'); const less = require('gulp-less') // 定义任务 gulp.task('helloGulp',functi ...

  6. 吴裕雄--天生自然 JAVASCRIPT开发学习： 验证 API

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  7. 康冕峰IT技术总结博客CSDN索引

    计算1-x内的质数, 结果保存在mysql中. Java 程序员面试笔试宝典 4.1基础知识https://blog.csdn.net/qq_40993412/article/details/1040 ...

  8. ACwing算法基础课听课笔记（第一章，基础算法一）(二分)

    二分法: 在看这个视频前,我对于二分法是一头雾水的,又加上这个算法平常从来没写过所以打了一年了还没正式搞过.视频提到ACwing上的一道题,我用自以为聪明的方法去做,结果TLE了,实在丢人,不说了,开 ...

  9. CSS3新属性：在网站中使用访客电脑里没有安装的字体

    CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的! ...

  10. uWSGI调整buffer-size

    https://uwsgi-docs.readthedocs.io/en/latest/Options.html#buffer-size buffer-size argument: required_ ...