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. Mysql--主库不停机搭建备库

    参考:http://blog.csdn.net/luozuolincool/article/details/38494817 mysqldump --skip-lock-tables --single ...

  2. C语言的字符串类型

    C语言使用指针来管理字符串(1)C语言中定义字符串的方法:char *p = "linux";此时p就叫字符串,但是实际上p只是一个字符指针(本质上就是一个指针变量,只是p指向了一 ...

  3. 谈IO中的阻塞和非阻塞，同步和异步及三种IO模型

    什么是同步和异步? 烧水,我们都是通过热水壶来烧水的.在很久之前,科技还没有这么发达的时候,如果我们要烧水,需要把水壶放到火炉上,我们通过观察水壶内的水的沸腾程度来判断水有没有烧开.随着科技的发展,现 ...

  4. JavaScript 之 "for"的衍生对象

    JavaScript for/in 语句 作用:for/in 语句用于遍历循环对象属性. 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作. 例子: 循环对象属性: var pers ...

  5. 从零开始入门 K8s | Kubernetes 存储架构及插件使用

    本文整理自<CNCF x Alibaba 云原生技术公开课>第 21 讲. 导读:容器存储是 Kubernetes 系统中提供数据持久化的基础组件,是实现有状态服务的重要保证.Kubern ...

  6. SpringContextHolder类

    1.通常使用SpringContextHolder类获取bean实例: 解决: 如果要在静态方法中调用某一bean的方法,那么该bean必须声明为static的,但正常情况下@Autowired无法注 ...

  7. python:创建文件夹：写入文本1：读取txt：读取Excel文件遍历文件夹：

    https://blog.csdn.net/u011956147/article/details/80369731 创建文件夹: import osimport shutil def buildfil ...

  8. java类的实例化顺序

    1． 父类静态成员和静态初始化块 ,按在代码中出现的顺序依次执行 2． 子类静态成员和静态初始化块 ,按在代码中出现的顺序依次执行 3． 父类实例成员和实例初始化块 ,按在代码中出现的顺序依次执行 4 ...

  9. 练习-HTML表单

    <html lang="en"> <head> <h1>大学生爱好调查</h1> <meta charset="ut ...

  10. maven项目出现Xxx is not a Servlet的问题

    应该是tomcat的jar包和maven的jar包冲突 在pom.xml中找到 <dependency> <groupId>org.apache.tomcat</grou ...