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. SpringCloud----服务注册中心Eureka

    Eureka是Netflix开源的一个RESTful服务,主要用于服务的注册发现.Eureka由两个组件组成:Eureka服务器和Eureka客户端.Eureka服务器用作服务注册服务器.Eureka ...

  2. 字符串编码研究：Unicode

    Unicode Unicode 编码系统可分为编码方式和实现方式两个层次. 1.编码方式 Unicode字符平面映射定义了所有的Unicode字符集. 2.实现方式(UTF8,UTF16) UTF-8 ...

  3. hdu 3483 矩阵乘法

    这个题目上周对抗赛题目,搞了我好久 对数学这种不是很敏感 其实都不是自己想出来的,看其他的资料和博客的推导 还是有点难度的,反正我是推不出来 通过二项式定理的化简 有两个博客写得比较好 http:// ...

  4. （递归）P1036 选数

    #include<stdio.h>#include<math.h>int x[20],n,k,i; //判断是否质数 int isprime(int n){    for(i= ...

  5. Go-方法-接口-异常处理-错误处理

    方法 什么是方法? 方法其实就是一个函数,在 func 这个关键字和方法名中间加入了一个特殊的接收器类型.接收器可以是结构体类型或者是非结构体类型.接收器是可以在方法的内部访问的. package m ...

  6. 移动端— Touch事件轮播图

    虽然 以前也写过手机端页面 .当时用的jquery moblie 框架.啥也不懂 就知道复制粘贴出效果 不敢改内部样式.现在呢  了解手机端原理 一些基本的概念 视口 缩放 后 .再去想以前写的页面  ...

  7. MBProgressHUD覆盖键盘

    发送消息的时候,需要用MBProgressHUD来覆盖窗口等待发送成功,但是无论如何键盘都覆盖不上. 于是各种研究,添加到view,添加到window,都无果..想破了脑子,总觉得加到window都覆 ...

  8. zookeeper以及集群的搭建

    今天我来写一写zookeeper集群的搭建流程 1.zookeeper的搭建不难,难的是对他的理解以及良好的使用.单机版的zookeeper只需要解压后直接命令 启动即可 解压zookeeper,ta ...

  9. beta函数与置信度估计

    可信度的估计 二项分布中的\(p\) 服从Beta分布 $ {\rm beta}(\alpha, \beta)$, 密度函数 \(\frac1{B(\alpha, \beta)} x^{\alpha- ...

  10. 【MySQL优化】数据库结构优化

    原则: 设计表结构,字段类型,最小化磁盘存储的空间,减少IO.数据库操作中最为耗时的操作就是 IO 处理,大部分数据库操作 90% 以上的时间都花在了 IO 读写上面.所以尽可能减少 IO 读写量,可 ...