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. shell下32位随机密码生成

    最简单的两个  参考 zzx@zzx120:~$ date | md5sum|cut -c1-790cdbd8 zzx@zzx120:~$ echo  `< /dev/urandom tr -d ...

  2. 201712-2 游戏 Java

    思路: 第一感觉有点像约瑟夫环.想到用队列解决比较好理解 import java.util.LinkedList; import java.util.Queue; import java.util.S ...

  3. CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）

    /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius ...

  4. [kuangbin 带你飞] DP专题——HDU - 1024

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  5. 第 36 章 TCP/IP协议基础

    问题一:为什么要有缓存表?为什么表项要有过期时间而不是一直有效 1.参考网址: 1)网络——ARP协议 2)linux arp机制解析 2.解答: 2.1 ARP缓存可以减小广播量,当主机发送一个AR ...

  6. Linux系统相关命令

    时间和日期 date cal 磁盘和目录空间 df du 进程信息 ps top kill 01. 时间和日期 序号 命令 作用 01 date 查看系统时间 02 cal calendar 查看日历 ...

  7. 记一次Java面试问题点总结

    引言 昨日接了一个阿里外包的电话面试,问了一些技术问题感觉到自己是真的菜,接触Java开发已经也有一段时间,技术方面说来惭愧,一直以来只是局限于框架工具的用法,也没有进行了解其实现的原理,更重要的是一 ...

  8. python格式化输出的三种形式

    法一: list_a = [1, 2, 3] str_b = 'aaa' string = "There are two contents:%s, %s" % (list_a, s ...

  9. 递归与树的写法-多种支付的设计-支付的接通-celery订单的回退实现

    递归与树的写法 data: data=[ {"cat_id":1,"name":"北京","parent_id":0}, ...

  10. 试验指标|试验单位|均方|随机模型|固定模型|字母标记法|LSR|q检验|LSD|重复值|弥补缺失数据|可加性|平方根转换|对数转换|反正弦转化

    第五章 方差分析 试验指标是什么? 就是统计的测量值,eg:身高体重 试验单位( experimental unit )是什么? 实验载体,比如一只小白鼠 均方是什么? 就是方差 随机模型的τ有何特点 ...