css相关/less/sass/stylus/css module/postcss

LingYanSi commented 9 years ago

主要写一写css相关的坑

LingYanSi commented 9 years ago

只写标准的css，然后使用css autoPrefixer自动添加前缀。不过有个问题，假如说，我想使用flex来布局，如何去向后兼容呢？写hack？

time:2015-08-05 这个问题应该不算什么问题，如果要用flex布局，除了box外，就不应该再考虑兼容性不然，还不如不用这个技术。

LingYanSi commented 9 years ago

Note:javscript保留字

如果要在JavaScript中通过element.style对象来修改float属性，那么你必须使用element.style对象的cssFloat属性来操作。另外还要注意到在 Internet Explorer 8 和更老的IE当中，要使用styleFloat属性。这是DOM驼峰命名和CSS所用的横杠分割命名法对应关系中的一个特例。（这么做的原因是在JavaScript中float是一个保留字，因为同样的原因，"class"被改成了className 、"for"被改成了htmlFor。

LingYanSi commented 8 years ago

部分安卓浏览器，文字排版底部会出现白边

IOS与PC客户端并，没有此现象，暂时并不知晓原因表现为文字的布局似乎没有按bottom【底线】布局，而是按baseline【基线】布局

这个问题挺严重的

此问题应该是因为 font-size/line-height 为奇数的原因

LingYanSi commented 8 years ago

在css文件中引用另一个css

@import url(reset.css);

话说我以前还不知道

劣势

会产生额外请求会比link的方式需要更多时间加载 dont-use-import博文介绍

LingYanSi commented 8 years ago

行内元素和块级元素

一个介绍

奇怪的行内布局

vertical-align: baseline/top/bottom/middle/text-top/text-bottom/数值/百分比昨天意外发现一个很奇怪的布局看这里

LingYanSi commented 8 years ago

浏览器默认font-size:16px

根元素html的font-size默认值为16px，所有浏览器都这么实现的。我倒是建议，在使用rem进行移动端布局的时候，设置html的font-size后，再设置body的font-size 在head标签，内敛引入一下代码，可解决因为font-size改变引起的闪动问题

<script>
    (function(){
        document.querySelector('html').style.fontSize = window.innerWidth/10+'px' ;
        window.addEventListener('resize',function(){
            document.querySelector('html').style.fontSize = window.innerWidth/10+'px' ;
        });
    })();
</script>
<style type="text/css">
    body{ font-size:12px; }
    .f1{ width:1rem; height:0.64rem; background:red; }
</style>

根据winter的说法，在 vw,vh,vmax,vmin 还没有得到广泛支持的情况下，使用rem是响应式布局一个比较好的解决方案。

LingYanSi commented 8 years ago

less

有的时候less不支持一些原生的css，比如说calc，会造成解析错误，解决方法如下

selector{
    width: calc(~'100% - @{sidebarWidth}')
}

其中的@{sidebarWidth} 表示变量

LingYanSi commented 8 years ago

sass

// 手机样式
@mixin mediaForPhone(){
    @media (max-width: 640px) {
        @content; 
    }
}

@mixin border($bgd: #000) {
    height: 1px;
    transform: scaleY(.5);
    background: $bgd;
}

@at-root {
     body .fuck {}
}

LingYanSi commented 8 years ago

stylus

待补充

LingYanSi commented 7 years ago

修复用户手动设置浏览器字体大小造成页面排版乱掉的问题

浏览器的逻辑是把原来10px的大小渲染成5/20px，window.innerWidth不变对于使用rem的情况，可以通过一下代码解决


    <body>
        <script type="text/javascript">
            (function(){
                var fs = window.innerWidth / 750 * 100
                var style = document.querySelector('html').style
                style.fontSize = fs + 'px'

                var div = document.createElement('div')
                div.style.width = '7.50rem'
                document.body.appendChild(div)

                style.fontSize = fs * window.innerWidth / div.clientWidth + 'px'

                document.body.removeChild(div)
            })() 
        </script>
        <button type="button" name="button" onclick=" location.reload()">reload</button>
        <script type="text/javascript">
        </script>
    </body>

因为要使用document.body.appendChild 因此需要把代码放在body内而不是head内，因为那时候body还没有加载出来

LingYanSi commented 7 years ago

移动端修改animationDuration / transitionDuration

一个bug

<style>
    .animation {
        transform: translateX(0);
        animation: fuck 3s linear infinite;

        @keyframes fuck 
        {
            from { transform: translateX(0) ; }
            to { transform: translateX(-100%) ; }
        }
    }
</style>
<body>
    <div class="animation">
        xx
    </div>
</body>

然后使用js修改animationDuration

$ele.style.animationDuration = '30s'

在android上，不会触发动画，修复此bug需要使用js手动添加className animation 然后再修改animationDuration

LingYanSi commented 7 years ago

微信浏览器 rem渲染bug

页面底部有白边，大多是因为height: 1.19rem为奇数导致的，将其改为1.20rem即可

LingYanSi commented 7 years ago

ios transform: rotate3d(0, 0, 1, 360deg)

transform: rotate3d(0, 0, 1, 360deg);

会被解析成0deg，造成动画不符合预期

LingYanSi commented 7 years ago

css modules

解决了css变量名冲突问题

css modules不会对tagName进行编译，会对class、id进行编译

webpack使用

// 部分不使用css modules功能，因为他们就是被当做全局css使用
           ...[false, true].map(useModule => {
               return  {
                    test: /\.scss$/,
                    [useModule ? 'exclude' : 'include']: GLOBAL_STYLE,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                module: useModule,
                                localIdentName: '[local]--[hash:base64:5]', // 在此指定编译后字段
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function() {
                                    return [
                                        require('autoprefixer')
                                    ]
                                }
                            }
                        },
                        'sass-loader'
                    ]
                }
           }),

一方面可以在webpack中指定哪部分使用css modules，另一方面可能我们在css文件内部也需要使用全局css名

@at-root {
        // 处理ios textarea强制padding: 3px的问题
        :global(.device-ios) .editor textarea {
            padding: $padding * .6 $padding - 3px;
        }
    }

被:global()包裹的id/class不会被编译

配合sass使用还是挺不错的😄

LingYanSi / blog