Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

为body增加功能相关的class #40

Closed
otakustay opened this issue May 8, 2013 · 13 comments
Closed

为body增加功能相关的class #40

otakustay opened this issue May 8, 2013 · 13 comments
Labels
proposal

Comments

@otakustay
Copy link
Member

有时候，一个控件的样式，可以使用CSS3来做，同时降级到低级浏览器能看。但又有时候，感觉降级的效果并不那么漂亮，所以要再加一些或者改变一下更合适。

因此，学习一下Modenizr，让esui也在body上加一些class，以方便写css吧。具体要什么样式，各控件自己控制吧，定义控件的时候加上去就好，但要求 **统一用ui-support-xxx的形式。

求讨论
@errorrik
Copy link

怎么个策略？

ui-support-ie ui-support-ie6?

@Justineo
Copy link
Member

@errorrik 灰大的意思应该是用特性检查吧，比如 ui-support-rgba、ui-support-border-radius 这样的，就像 GitHub 页面 HTML 元素上的那些 class。

@otakustay
Copy link
Member Author

是的，我觉得用特性检测更好，且这些由控件自己来做，当然如果控件有需要，加个ie6的样式也行

@errorrik
Copy link

  1. 控件来做有可能会冲突吧
  2. 特性那么多，挂n个到body上，rule match的性能。。。

没有很具体的例子，所以，我也没法判断是不是应该开这个口。因为对于rgba和border-radius这种需求来讲，貌似不需要开这个口就能支持了

@otakustay
Copy link
Member Author

  1. 因为是addClass，冲突也没关系吧，不会重复的
  2. 特性确实多，但其实和CSS有关的不多，且希望控件尽可能不用

我提这个是因为，有些东西只用CSS的优先级来控制优雅降级，虽然能降，但在低版本下太丑太丑……但只.ie6又显得奇怪

@errorrik
Copy link

那么，现在有啥场景是必须用的呢？有例子米？

@otakustay
Copy link
Member Author

用IE低版本看看demo/Wizard.html就啥也明白了TQT因为用border-radius做三角箭头，不支持的浏览器下看很丑……但是又不能只用优先级做到没有border-radius的情况下用别的样式搞得稍微好看些

@errorrik
Copy link

还好吧，除了用了:before和:after，没看出啥兼容性问题来。transparent貌似也有兼容性问题，我找个ie6测试测试

@errorrik
Copy link

我觉得，ie6下，变成方型就好了，用下划线，让那些块紧凑点就行。。。

@otakustay
Copy link
Member Author

这个外形的问题同时涉及到IE8，我们大概还没能连IE8也无视掉。仅使用标准的CSS覆盖关系要做出降级效果并不容易，如加个下划线的话，Chrome也会有下划线出来，反而破坏了Chrome下的美感。用CSS Hack当然可以，但合适吗？

@errorrik
Copy link 

<!DOCTYPE html>
<html>
<head>
    <style>
    ul, li{padding:0;margin:0;list-style: none}
    li { float:left; height:24px; margin-right:-20px;}
    li span{line-height: 24px;padding:0 12px 0 0; background: #e4e4e4;height:24px;float:left;}
    .first span{padding-left:12px;}
    li b{width:0;height:0;line-height: 0;font-size:0;border:12px solid transparent;border-left-color:#e4e4e4;float:left;}
    li i{width:0;height:0;line-height: 0;font-size:0;border:12px solid #e4e4e4;border-left-color:transparent;float:left;}
    .current span{background: red;color:#fff;}
    .current b{border-left-color:red;}
    .current i{border-color:red;border-left-color:transparent;}
    </style>
</head>
<body>
<ul>
<li class="first"><span>1</span><b></b>
<li class="current"><i></i><span>2</span><b></b>
<li><i></i><span>3</span><b></b>
</ul>

临时随便做了个，ie7也支持，就是ie6不支持。我没太明白ie8为啥不支持

@otakustay
Copy link
Member Author

好，看来是我记混了，对一些特性的支持我重新去梳理一下和UE及PM确认支持度吧

@errorrik
Copy link

好，对Wizard那个case，我的建议是：

  1. 放弃支持ie6，在ie6下显示并排并且间隔合理的方形块（通过css hack处理间隔）
  2. 如果想支持ie7，不要用:before和:after。如果不想支持，让ie7保持和ie6相同的效果。是否支持ie7可以根据浏览器统计和标签洁癖决定。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
proposal
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@otakustay @Justineo @errorrik