I believe this is not the popular stance but I prefer embedded hacks such as * and _ in the style sheet rather than using separate IE specific style sheets. At first I tried separate style sheets but I found the scope of having the styles for the same elements span multiple files to be painful to maintain. It was not obvious while changing a style in the primary style sheet that I also had a corresponding style in one of the IE specific style sheets. Often time these style changes where so minor such as a minor adjustment of the padding that the extra time to test it in every browser seemed excessive and thus did not always happen.
我相信这不是流行的立场,但我更喜欢样式表中的嵌入式黑客,如*和_,而不是使用单独的IE特定样式表。起初我尝试了单独的样式表,但我发现使相同元素的样式跨越多个文件的范围很难维护。在主要样式表中更改样式时,我在其中一个IE特定样式表中也有相应的样式,这一点并不明显。通常这些样式的时间变化很小,例如对填充的微小调整,在每个浏览器中测试它的额外时间似乎过多,因此并不总是发生。
If the hack was just included directly in the primary style sheet however, it would have been obvious that the style for IE 6 needed to be adjusted and tested as well. I can hear people saying you should test every style change in all of your supported browsers, but in the real world I find this stance unrealistic, and I do not see all of the developers on the team following through with it.
如果黑客只是直接包含在主要样式表中,那么显然IE 6的样式也需要进行调整和测试。我可以听到有人说你应该在所有支持的浏览器中测试每种风格的变化,但在现实世界中,我发现这种立场是不现实的,我并没有看到团队中的所有开发人员都在跟进它。
I understand that including the hacks makes your CSS not validate but I have found that I can quickly scan the validation results and ignore the errors regarding those hacks. In my opinion I would prefer to have a little more work interpreting the validation results than dealing with the site being rendered incorrectly in IE 6. I have also read elsewhere where people will not do hacks or separate style sheets but instead adjust/simplify the design so it will work for all browsers. Unfortunately the developer implementing the design does not always have this option when they are not in charge of the design. Plus the amount of hours I have struggled to get minor padding issues to work in all browsers just to avoid a hack nin hindsight seems pretty wasteful.
我知道包括黑客攻击会使你的CSS无法验证,但我发现我可以快速扫描验证结果并忽略有关这些黑客的错误。在我看来,我更愿意解释验证结果,而不是处理在IE 6中错误呈现的网站。我还读过其他地方,人们不会做黑客或单独的样式表,而是调整/简化设计所以它适用于所有浏览器。不幸的是,实施该设计的开发人员在不负责设计时并不总是有这个选项。此外,我努力在所有浏览器中使用少量填充问题以避免黑客攻击事故的时间似乎相当浪费。
I am interested in others thoughts and justifications for their stances on this paradigm.
我对其他人的想法和对这种范式的立场的理由感兴趣。
5 个解决方案
#1
I've done some extensive work with CSS, crossing almost every browser under the sun, for small projects and large. While there is always asthetic appeal to any kind of code you may write, I think the greater concern is maintainability...and this goes for CSS as much as for any other kind of code.
我已经完成了一些CSS的广泛工作,几乎每个浏览器都在阳光下,适用于小型项目和大型项目。虽然你可能会编写任何类型的代码总是具有异乎寻常的吸引力,但我认为更大的关注点是可维护性......这对于CSS和任何其他类型的代码都是如此。
While organizing your hacks and other css "fixes" into separate files that are loaded via conditional logic is nice from an asthetic perspective...it can actually create maintenance hassles down the road.
虽然组织你的黑客和其他CSS“修复”到通过条件逻辑加载的单独文件是很好的从一个审慎的角度......它实际上可以创建维护麻烦的道路。
In my experience, its best to keep your hacks with the base CSS they are fixing for any given browser. This keeps CSS that styles some particular element of your UI together in a single place, which makes managing that CSS significantly easier, and also makes it clear where future fixes for possible (or probable) fiture browser css bugs should be placed.
根据我的经验,最好的方法是使用他们为任何给定浏览器修复的基本CSS。这使得将UI的某些特定元素组织在一起的CSS可以在一个地方保存,这使得管理CSS变得非常容易,并且还清楚地表明应该放置可能(或可能)适合的浏览器css错误的未来修复。
In addition to placing your hacks just after the base css they relate to, you should also make sure its clear what a given hack fixes, along with the browsers the hack supports, with comments. I have worked on some large projects that used CSS extensively and in advanced ways, but we still had to support IE6. Long term, my team and I (which, btw, were all C# developers...at this particular job devs not only coded, but also did all UI implementation according to UI mockups created by our graphic designers) learned that you can actually use CSS to properly style pretty much any site without the need for hacks (it can be difficult, and requires some extensive knowledge of how CSS works...but it is possible to solve almost every bug in IE and Firefox without hacks...just clever/proper use of valid CSS).
除了将你的hack放在它们所涉及的基本css之后,你还应该确保它清楚了解给定的hack修复,以及hack支持的浏览器和注释。我曾经参与过一些大量项目,这些项目以高级方式广泛使用CSS,但我们仍然需要支持IE6。长期来看,我和我的团队(顺便说一下,都是C#开发人员...在这个特殊的工作开发人员不仅编码,而且根据我们的图形设计师创建的UI模型完成了所有UI实现)了解到你可以实际使用CSS可以在不需要黑客的情况下正确地设置任何网站的样式(这可能很难,并且需要一些关于CSS如何工作的广泛知识......但是有可能解决IE和Firefox中的几乎所有错误而没有黑客......只是聪明/正确使用有效的CSS)。
Before my team learned enough about CSS to accomplish that, however, we had more hacks that we could count. Keeping our hacks grouped together with the base css they fixed along with tagging each hack with a reason and the browser or browsers that hack supported went a long way to keeping our monstrous CSS files maintainable. Not only will this help improve maintainability...but as you learn more about CSS and figure out ways to avoid hacks...you'll be able to remove them little by little as you fix up existing CSS to use your new tricks. Since your hacks are right next to the CSS your improving, its easy to get rid of hacks that are no longer needed.
然而,在我的团队学到足够的CSS来实现这一目标之前,我们有更多的黑客可以计算。保持我们的黑客与他们修复的基本css组合在一起并标记每个黑客的原因和浏览器或支持黑客的浏览器大大有助于保持我们可怕的CSS文件可维护。这不仅有助于提高可维护性......但随着您对CSS的了解越来越多,并想出避免黑客攻击的方法......当您修复现有的CSS以使用新技巧时,您将能够一点一点地删除它们。由于你的黑客正好在你的改进之后,它很容易摆脱不再需要的黑客。
#2
Well, I sort of fall into the same boat... if I can put in one * html #id instead of doing a whole conditional comment and specific ie6 stylesheet I'll do it. It may not be so elegant, but it saves a whole new CSS file to maintan.
好吧,我有点陷入同一条船...如果我可以放入一个* html #id而不是做一个完整的条件评论和特定的ie6样式表我会做的。它可能不是那么优雅,但它将一个全新的CSS文件保存到maintan。
However, If I end up having lots of * html and * prefixes, or the ultra long IE7 hack (which I can't recall right now), I'll prefer a conditional stylesheet.
但是,如果我最终拥有大量* html和*前缀,或者超长IE7黑客(我现在无法回想起),我会更喜欢条件样式表。
I don't really see * html as a true hack... it's a valid selector (as far as I know), it just shouldn't work because there is no parent element to HTML (except for some reason in IE6). However, prefixing a property with an underscore or specific character does make the selector property invalid.
我真的没有看到* html是一个真正的黑客...它是一个有效的选择器(据我所知),它只是不应该工作,因为没有HTML的父元素(除了IE6中的某些原因)。但是,使用下划线或特定字符为属性添加前缀会使选择器属性无效。
Another one I don't mind is using display: inline for IE6 to fix the double margin when an element is floated. I use this in my main CSS as it doesn't affect other browsers (only block level elements can be floated), and it's a hell of a lot easier to maintain. I generally leave a little note, something like
另一个我不介意的是使用display:内联IE6来修复元素浮动时的双边距。我在我的主CSS中使用它,因为它不会影响其他浏览器(只有块级元素可以浮动),并且它更容易维护。我通常会留下一些小纸条
#my-div {
diplay: inline; /* ie6 */
float: left;
margin-left: 20px;
}
So I'd say if it's a few hacks, I leave it in my main CSS. If it becomes unwieldy (and it often doesn't as I know the common ways that IE fail), I'll create an extra stylesheet and use conditional comments.
所以我会说如果它是几个黑客,我把它放在我的主要CSS中。如果它变得笨拙(并且它通常不是我知道IE失败的常见方式),我将创建一个额外的样式表并使用条件注释。
#3
those are HACKS not CONDITIONALS.
那些是HACKS而不是条件。
don't get me wrong i do the same :\ sometimes its on a case based scenario. if your dealing with large scale websites use CONDITIONALS.
不要误会我做同样的事情:\有时是基于案例的场景。如果您与大型网站的交易使用CONDITIONALS。
if your doing some crap u don't care about use hacks.
如果你做一些废话你不关心使用黑客。
difference is the following:
区别如下:
HACKS - work for the time being, that is until someone fixes them, which they probally won't CONDITIONALS - GUARANTEED to work
HACKS - 暂时工作,直到有人修复它们,它们很可能不会有条件 - 保证工作
#4
I've used conditional comments to wrap the page in DIVs with ids, targeting the correct IE version, like described here.
我已经使用条件注释用ID包装DIV中的页面,目标是正确的IE版本,如此处所述。
This is much easier to maintain (like you said), keeps your css valid (no errors to overlook) and is more stable than hacks...
这更容易维护(就像你说的那样),保持你的css有效(没有错误可以忽略),并且比黑客更稳定......
#5
This might be offtopic, I'm not a guru of CSS... however, have you tried SASS?
这可能是offtopic,我不是CSS的大师...但是,你尝试过SASS吗?
http://haml.hamptoncatlin.com/docs/
I find CSS rather poor as an expressive language for styles. Lateral thinking, if you had a central protoCSS with your master style and it could translate them to the appropiate browser version, I think you would have it the best way possible: maintainable and simple to work with.
我认为CSS相当差,作为风格的表达语言。横向思维,如果你有一个主要风格的中心protoCSS并且它可以将它们转换为合适的浏览器版本,我认为你会尽可能地使用它:可维护且易于使用。
Sass is not exactly that, but it shouldn't be difficult to change it to that. If you aren't a developer I'm sure you will be able to convince Hampton or someone else to code it.
Sass并不完全是这样,但改变它并不困难。如果您不是开发人员,我相信您将能够说服汉普顿或其他人对其进行编码。
#1
I've done some extensive work with CSS, crossing almost every browser under the sun, for small projects and large. While there is always asthetic appeal to any kind of code you may write, I think the greater concern is maintainability...and this goes for CSS as much as for any other kind of code.
我已经完成了一些CSS的广泛工作,几乎每个浏览器都在阳光下,适用于小型项目和大型项目。虽然你可能会编写任何类型的代码总是具有异乎寻常的吸引力,但我认为更大的关注点是可维护性......这对于CSS和任何其他类型的代码都是如此。
While organizing your hacks and other css "fixes" into separate files that are loaded via conditional logic is nice from an asthetic perspective...it can actually create maintenance hassles down the road.
虽然组织你的黑客和其他CSS“修复”到通过条件逻辑加载的单独文件是很好的从一个审慎的角度......它实际上可以创建维护麻烦的道路。
In my experience, its best to keep your hacks with the base CSS they are fixing for any given browser. This keeps CSS that styles some particular element of your UI together in a single place, which makes managing that CSS significantly easier, and also makes it clear where future fixes for possible (or probable) fiture browser css bugs should be placed.
根据我的经验,最好的方法是使用他们为任何给定浏览器修复的基本CSS。这使得将UI的某些特定元素组织在一起的CSS可以在一个地方保存,这使得管理CSS变得非常容易,并且还清楚地表明应该放置可能(或可能)适合的浏览器css错误的未来修复。
In addition to placing your hacks just after the base css they relate to, you should also make sure its clear what a given hack fixes, along with the browsers the hack supports, with comments. I have worked on some large projects that used CSS extensively and in advanced ways, but we still had to support IE6. Long term, my team and I (which, btw, were all C# developers...at this particular job devs not only coded, but also did all UI implementation according to UI mockups created by our graphic designers) learned that you can actually use CSS to properly style pretty much any site without the need for hacks (it can be difficult, and requires some extensive knowledge of how CSS works...but it is possible to solve almost every bug in IE and Firefox without hacks...just clever/proper use of valid CSS).
除了将你的hack放在它们所涉及的基本css之后,你还应该确保它清楚了解给定的hack修复,以及hack支持的浏览器和注释。我曾经参与过一些大量项目,这些项目以高级方式广泛使用CSS,但我们仍然需要支持IE6。长期来看,我和我的团队(顺便说一下,都是C#开发人员...在这个特殊的工作开发人员不仅编码,而且根据我们的图形设计师创建的UI模型完成了所有UI实现)了解到你可以实际使用CSS可以在不需要黑客的情况下正确地设置任何网站的样式(这可能很难,并且需要一些关于CSS如何工作的广泛知识......但是有可能解决IE和Firefox中的几乎所有错误而没有黑客......只是聪明/正确使用有效的CSS)。
Before my team learned enough about CSS to accomplish that, however, we had more hacks that we could count. Keeping our hacks grouped together with the base css they fixed along with tagging each hack with a reason and the browser or browsers that hack supported went a long way to keeping our monstrous CSS files maintainable. Not only will this help improve maintainability...but as you learn more about CSS and figure out ways to avoid hacks...you'll be able to remove them little by little as you fix up existing CSS to use your new tricks. Since your hacks are right next to the CSS your improving, its easy to get rid of hacks that are no longer needed.
然而,在我的团队学到足够的CSS来实现这一目标之前,我们有更多的黑客可以计算。保持我们的黑客与他们修复的基本css组合在一起并标记每个黑客的原因和浏览器或支持黑客的浏览器大大有助于保持我们可怕的CSS文件可维护。这不仅有助于提高可维护性......但随着您对CSS的了解越来越多,并想出避免黑客攻击的方法......当您修复现有的CSS以使用新技巧时,您将能够一点一点地删除它们。由于你的黑客正好在你的改进之后,它很容易摆脱不再需要的黑客。
#2
Well, I sort of fall into the same boat... if I can put in one * html #id instead of doing a whole conditional comment and specific ie6 stylesheet I'll do it. It may not be so elegant, but it saves a whole new CSS file to maintan.
好吧,我有点陷入同一条船...如果我可以放入一个* html #id而不是做一个完整的条件评论和特定的ie6样式表我会做的。它可能不是那么优雅,但它将一个全新的CSS文件保存到maintan。
However, If I end up having lots of * html and * prefixes, or the ultra long IE7 hack (which I can't recall right now), I'll prefer a conditional stylesheet.
但是,如果我最终拥有大量* html和*前缀,或者超长IE7黑客(我现在无法回想起),我会更喜欢条件样式表。
I don't really see * html as a true hack... it's a valid selector (as far as I know), it just shouldn't work because there is no parent element to HTML (except for some reason in IE6). However, prefixing a property with an underscore or specific character does make the selector property invalid.
我真的没有看到* html是一个真正的黑客...它是一个有效的选择器(据我所知),它只是不应该工作,因为没有HTML的父元素(除了IE6中的某些原因)。但是,使用下划线或特定字符为属性添加前缀会使选择器属性无效。
Another one I don't mind is using display: inline for IE6 to fix the double margin when an element is floated. I use this in my main CSS as it doesn't affect other browsers (only block level elements can be floated), and it's a hell of a lot easier to maintain. I generally leave a little note, something like
另一个我不介意的是使用display:内联IE6来修复元素浮动时的双边距。我在我的主CSS中使用它,因为它不会影响其他浏览器(只有块级元素可以浮动),并且它更容易维护。我通常会留下一些小纸条
#my-div {
diplay: inline; /* ie6 */
float: left;
margin-left: 20px;
}
So I'd say if it's a few hacks, I leave it in my main CSS. If it becomes unwieldy (and it often doesn't as I know the common ways that IE fail), I'll create an extra stylesheet and use conditional comments.
所以我会说如果它是几个黑客,我把它放在我的主要CSS中。如果它变得笨拙(并且它通常不是我知道IE失败的常见方式),我将创建一个额外的样式表并使用条件注释。
#3
those are HACKS not CONDITIONALS.
那些是HACKS而不是条件。
don't get me wrong i do the same :\ sometimes its on a case based scenario. if your dealing with large scale websites use CONDITIONALS.
不要误会我做同样的事情:\有时是基于案例的场景。如果您与大型网站的交易使用CONDITIONALS。
if your doing some crap u don't care about use hacks.
如果你做一些废话你不关心使用黑客。
difference is the following:
区别如下:
HACKS - work for the time being, that is until someone fixes them, which they probally won't CONDITIONALS - GUARANTEED to work
HACKS - 暂时工作,直到有人修复它们,它们很可能不会有条件 - 保证工作
#4
I've used conditional comments to wrap the page in DIVs with ids, targeting the correct IE version, like described here.
我已经使用条件注释用ID包装DIV中的页面,目标是正确的IE版本,如此处所述。
This is much easier to maintain (like you said), keeps your css valid (no errors to overlook) and is more stable than hacks...
这更容易维护(就像你说的那样),保持你的css有效(没有错误可以忽略),并且比黑客更稳定......
#5
This might be offtopic, I'm not a guru of CSS... however, have you tried SASS?
这可能是offtopic,我不是CSS的大师...但是,你尝试过SASS吗?
http://haml.hamptoncatlin.com/docs/
I find CSS rather poor as an expressive language for styles. Lateral thinking, if you had a central protoCSS with your master style and it could translate them to the appropiate browser version, I think you would have it the best way possible: maintainable and simple to work with.
我认为CSS相当差,作为风格的表达语言。横向思维,如果你有一个主要风格的中心protoCSS并且它可以将它们转换为合适的浏览器版本,我认为你会尽可能地使用它:可维护且易于使用。
Sass is not exactly that, but it shouldn't be difficult to change it to that. If you aren't a developer I'm sure you will be able to convince Hampton or someone else to code it.
Sass并不完全是这样,但改变它并不困难。如果您不是开发人员,我相信您将能够说服汉普顿或其他人对其进行编码。