[TypeStyle] Use fallback values in TypeStyle for better browser support
You can increase the browser support of your CSS using fallback values and vendor prefixes. This lesson covers using vendor prefixes and fallback values (single prop multiple values) with TypeStyle. It also shows best practices for maintaining variables in the presence of vendor prefixing.
import { style, cssRaw, types } from "typestyle";
import * as React from "react";
import * as ReactDOM from "react-dom"; cssRaw(`
body {
font-size: 1.5em;
font-weight: bold;
color: gold
}
`); const scroll: types.NestedCSSProperties = {
"-webkit-overflow-scrolling": "touch",
overflow: "auto"
}; const bg = style(scroll, {
backgroundColor: [
/* The fallback */
"rgb(200, 54, 54)",
/** Graceful upgrade */
"rgba(200, 54, 54, 0.5)"
]
}); const App = () =>
<div className={bg}>
Hello World!
</div>; ReactDOM.render(<App />, document.getElementById("root"));
[TypeStyle] Use fallback values in TypeStyle for better browser support的更多相关文章
- [TypeStyle] Load raw CSS in TypeStyle
TypeStyle tries to be an all in one CSS in JS management solution so you can always fall back to raw ...
- [TypeStyle] Compose CSS classes using TypeStyle
We will demonstrate composing classes using the utility classes function. classes is also what we re ...
- [TypeStyle] Style CSS pseudo-classes using TypeStyle with $nest
TypeStyle is a very thin layer on top of CSS. In this lesson we show how to change styles based on p ...
- [TypeStyle] Add responsive styles using TypeStyle Media Queries
Media queries are very important for designs that you want to work on both mobile and desktop browse ...
- ES8新特性——ES8 was Released and here are its Main New Features
原文: https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66 -------- ...
- [TypeStyle] Add type safety to CSS using TypeStyle
TypeStyle is the only current CSS in JS solution that is designed with TypeSafety and TypeScript dev ...
- jQ1.5源码注释以及解读RE
jQ作为javascript的库( ▼-▼ ), 尽善尽美, 代码优美, 值得学习. 这一周平常上班没啥事也看jQ1.5的代码, 今天周六差不多看完了(Sizzle部分还没看), 重新看了一下, ...
- 【转】Styling And Animating SVGs With CSS
原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS- ...
- HOCON 了解
Spec This is an informal spec, but hopefully it's clear. Goals / Background The primary goal is: kee ...
随机推荐
- vue 实例的生命周期
Vue把整个生命周期划分为创建.挂载.更新.销毁等阶段,每个阶段都会给一些"钩子"让我们来做一些我们想实现的动作. 分为以下几个阶段 1.beforeCreate 此阶段为 ...
- jq--图片懒加载
html 1.给图片不给真真意义上的src属性路径,可通过我们自己想要添加时改变它的属性路径即可. 2.要获取浏览器中三种高度. $(window).height();//屏幕高度 $(window) ...
- css3--简单的加载动画
.load-container { width: 30%; height: auto; position: relative; margin: 1rem auto; } .load { width: ...
- PHP防止Xss攻击
mysql_real_escape_string() 所以得SQL语句如果有类似这样的写法:"select * from cdr where src =".$userId; 都要改 ...
- Modbus设备调试工具Winform(包括SRC0001、海康威视、TTS以及各种类型LED的测试)
1.SRC寄存器读写测试 2.采集数据终端模块(这里是康海时代)调试 3.RS485传感器设备调试 4.LED/TTS/海康威视等展示设备调试 5.Modbus等协议规约资料及4-20mA设备调试 以 ...
- 异步调用WCF的方法需要小心的地方
直接使用下面的代码,由于client对象占用的资源没有被释放,会导致内存泄露GetSimServiceReference.GetSimServiceClient client = new GetSim ...
- unity-unet-同步各个player唯一标识
Multiplayer Game 中所有 player 都有一个唯一标识.在unet中可以通过 Network Identity 组件获取到该 player 在整个网络整的 唯一 的连接 id 这里测 ...
- arukas 的 Endpoint
arukas 的 Endpoint 什么是端点 What is Endpoint arukas.io 的实例几乎每周都自动重新启动,当实例重新启动时,其端口会更改.IP地址和端口的平均寿命是一周,有时 ...
- Spring RootBeanDefinition,ChildBeanDefinition,GenericBeanDefinition
转自:https://blog.csdn.net/joenqc/article/details/68942972 RootBeanDefinition,ChildBeanDefinition,Gene ...
- 40.【IntelliJ IDEA】使用idea解决新建jsp文件而找不到jsp文件模版的新建选项
转自:https://www.cnblogs.com/sxdcgaq8080/p/7676294.html 使用idea解决新建jsp文件而找不到jsp文件模版的新建选项,这样每次创建一个新的jsp文 ...