[TypeStyle] Use fallback values in TypeStyle for better browser support

最新推荐文章于 2024-09-03 08:51:48 发布

转载最新推荐文章于 2024-09-03 08:51:48 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/6960743.html

本文介绍如何通过TypeStyle使用浏览器前缀和回退值来增强CSS兼容性，并展示了最佳实践，包括变量维护等方面。

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"));

转载于:https://www.cnblogs.com/Answer1215/p/6960743.html