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. 选择排序_python

    def selectdata(ls): for i in range(len(ls)): index=i for j in range(i+1,len(ls)): if ls[j]<ls[ind ...

  2. zabbix监控一个机器上的多个java进程的jvm

    一.监控安装部署 1.1 JVM端口配置 (/bqhexin/tomcat/bin/catalina.sh)在安装的tomcat路径,找到catalina.sh文件. vim编辑并添加: catali ...

  3. python 发送邮件，并且带附件

    #!/usr/bin/pythonfrom email.mime.text import MIMETextfrom email.mime.multipart import MIMEMultiparti ...

  4. UVA 11987 - Almost Union-Find 并查集的活用 id化查找

    受教了,感谢玉斌大神的博客. 这道题最难的地方就是操作2,将一个集合中的一个点单独移到另一个集合,因为并查集的性质,如果该点本身作为root节点的话,怎么保证其他点不受影响. 玉斌大神的思路很厉害,受 ...

  5. Linux中Tomcat 自动设置CATALINA_HOME方法

    Linux中Tomcat 自动设置CATALINA_HOME方法 在服务器部署中,我们经常会出现“在一个服务器上运行多个tomcat服务”的情况. 使用如下方法设置,可以无限复制平移扩展Tomcat, ...

  6. JDK的安装与环境变量配置

    1.下载JDK后安装,此处安装的是JDK8 2.安装后的路径如下图所示,JDK与JRE在同一个文件夹中 3.安装完JDK后配置环境变量  计算机→属性→高级系统设置→高级→环境变量 4.系统变量→新建 ...

  7. 命令行的操作——cd

    初学命令行,总是提示找不到有关的文件,当时的我啥也不知道,最后就很惨,啥也找不到 后来就只好自己上网找资料了 以下博文改编自小佳的博客 在需要处理不同路径下的文件的时候,经常要在命令行模式下切换目录, ...

  8. JS 日期格式化为 2020-11-01 22:33:44 格式

    项目中经常会用到将JS日期格式化输出为 标准格式(2020-11-01 22:33:44)的问题.写个精简版的,代码如下: function formatDate(d){ d = d || new D ...

  9. 乳草的侵占（BFS）

    armer John一直努力让他的草地充满鲜美多汁的而又健康的牧草.可惜天不从人愿,他在植物大战人类中败下阵来.邪恶的乳草已经在他的农场的西北部份占领了一片立足之地. 草地像往常一样,被分割成一个高度 ...

  10. Mybatis 使用分页查询亿级数据 性能问题 DB使用ORACLE

    一般用到了mybatis框架分页就不用自己写了 直接用RowBounds对象就可以实现,但这个性能确实很低 今天我用到10w级得数据分页查询,到后面几页就迭代了很慢 用于记录 1.10万级数据如下 [ ...