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. 18 12 25 css 基本语法以及页面使用

    css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值 css页面引入方法: 1.外联式:通过l ...

  2. PIP一次性导入所有环境和指定镜像源

    镜像源: 阿里云:https://mirrors.aliyun.com/pypi/simple/豆瓣:https://pypi.douban.com/simple/清华大学:https://pypi. ...

  3. Eclipse中常用的快捷键总结！不收藏后悔！

    Eclipse中常用的快捷键总结!不收藏后悔!Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ ...

  4. C# 串口编程，扫码枪使用

    一.串口通信简介 串行接口(串口)是一种可以将接受来自CPU的并行数据字符转换为连续的串行数据流发送出去,同时可将接受的串行数据流转换为并行的数据字符供给CPU的器件.一般完成这种功能的电路,我们称为 ...

  5. 再谈记忆化搜索 HDU-1078

    最近做DP题目,发现无论是LCS,还是有些题目涉及将动态规划的路径打印出来,而且有时候还要按格式输出,这个时候,记忆化搜索显得尤其重要,确实,记忆化搜索使用优化版本的动态规划,用起来思路清晰,非常方便 ...

  6. 【Python】关于import QtCore报错的处理方法

    刚开始学习使用PyQT,但总碰到一些小挫折 比如 import Pyqt成功 而 from PyQt5 import QtCore, QtGui, QtWidgets却报错,找了半天终于找到资料,原因 ...

  7. mysql 启动报错Host name could not be resolved解决办法

    mysql 启动报错信息如下: [root@xxx ~]# 2018-01-26 17:06:35 33 [Warning] Host name 'bogon' could not be resolv ...

  8. ubuntu 插网线无法上网解决方案

    前言 不知道最近是什么情况,ubuntu链接网线总是上不去网,但是wifi还能用,一直也就没有捣鼓,不过今天连wifi都不能用了,只能开始修理了. 修复方案 使用ifconfig命令查看以太网的名称 ...

  9. Eclipse 常见Maven web项目

    我是从工作到现在一直用的IDEA,编程软件只要你会技术都没什么区别,只是熟与不熟. 1.下载eclipse软件 百度上搜索eclipse或者到官网https://www.eclipse.org/dow ...

  10. 吴裕雄--天生自然 PHP开发学习：多维数组

    <pre> <?php // 二维数组: $cars = array ( array("Volvo",100,96), array("BMW" ...