What is the best practice/methodology for creating a web page that is browser compatible and purely in CSS, except for of course the content. I notice that big name websites like yahoo.com use CSS exclusively for layout, which renders the content pretty well in hand held devices. Being that I have an opportunity to redesign the external websites I would like to incorporate this method, but I do not know how to. Note: I am using JSF, but standard HTML/CSS advice is just as welcome.
什么是创建与浏览器兼容且纯粹在CSS中的网页的最佳实践/方法,当然除了内容。我注意到像yahoo.com这样的大牌网站专门用于布局,这使得内容在手持设备中得到很好的体现。由于我有机会重新设计外部网站,我想加入这种方法,但我不知道如何。注意:我使用的是JSF,但标准的HTML / CSS建议同样受欢迎。
8 个解决方案
#1
EvanK's suggestion of working with a CSS framework is a great idea, and personally I would recommend Compass, which to my mind really represents a new way to think about CSS and is generally very elegant. Blueprint has been mentioned by a number of other posters. Compass actually uses Blueprint (or another framework of your choice) and abstracts it even further allowing you to dynamically generate new grid templates. Essentially it gives you a more programmatic framework for working with Blueprint and SASS.
EvanK建议使用CSS框架是一个好主意,我个人会推荐Compass,在我看来它真正代表了一种思考CSS的新方法,而且通常非常优雅。许多其他海报都提到了蓝图。 Compass实际上使用Blueprint(或您选择的其他框架)并进一步抽象它,允许您动态生成新的网格模板。从本质上讲,它为您提供了一个使用Blueprint和SASS的更具编程性的框架。
Before you look into a framework however, getting your head around some fundamentals is essential. W3Schools is a good place to start, followed by some good design blogs like A List Apart.
然而,在你研究一个框架之前,了解一些基本原理是至关重要的。 W3Schools是一个很好的起点,其次是一些优秀的设计博客,如A List Apart。
In terms of minimising cross browser problems a CSS reset is essential, which is the approach Yahoo takes.
在最小化跨浏览器问题方面,CSS重置是必不可少的,这是雅虎所采用的方法。
#2
I was going to recommend the same.. here are the two I like and seem to be the most popular/supported
我打算推荐相同的..这是我喜欢的两个,似乎是最受欢迎/支持
#3
I think a good first step for you is to look into using a CSS framework of some kind. The goal of such frameworks -- according to Wikipedia -- is to "allow for easier, more standards-compliant styling of a webpage", which sounds just like what you're asking.
我认为你迈出的第一步是研究使用某种CSS框架。根据*的说法,这种框架的目标是“允许更简单,更符合标准的网页样式”,这听起来就像你要问的那样。
As for which CSS frameworks to use, I can't recommend anything myself.
至于使用哪个CSS框架,我自己也不能推荐任何东西。
#4
You need to learn how to use CSS. There's plenty of tutorials on the web.
您需要学习如何使用CSS。网上有很多教程。
here's a good one: http://www.barelyfitz.com/screencast/html-training/css/positioning/
这是一个很好的:http://www.barelyfitz.com/screencast/html-training/css/positioning/
#5
I recommend using a CSS framework to get started. You'll get a great grid structure for your pages (like the big name pros use) and rapidly speed up your development time once you get used to a framework.
我建议使用CSS框架开始。您将为您的页面获得一个很好的网格结构(比如专业人士使用的大名称),并在您习惯了框架后迅速加快开发时间。
Because you mentioned yahoo, I recommend their YUI Grids CSS for layout.
因为你提到雅虎,我推荐他们的YUI Grids CSS进行布局。
I prefer the blueprintcss because it has a style reset for default browser styles, and it has a stylesheet for printing as well.
我更喜欢blueprintcss,因为它具有默认浏览器样式的样式重置,并且它还有一个用于打印的样式表。
#6
Frameworks aside, to implement a cross-browser compatible site, I recommend that you initially target a standards compliant browser (like Firefox) and then only after it is working, extend support to less standards-compliant browsers (like IE6).
除了框架之外,为了实现跨浏览器兼容的站点,我建议您最初以符合标准的浏览器(如Firefox)为目标,然后仅在其工作之后,将支持扩展到不太符合标准的浏览器(如IE6)。
My experience is that it is very difficult (nigh on impossible) to initially target a non-standard browser (like IE6) and then make the site cross-browser compatible.
我的经验是,最初针对非标准浏览器(如IE6)并使网站跨浏览器兼容是非常困难的(几乎不可能)。
#7
There's really no secret professional sauce to making pure-CSS layouts works. There are MANY ways to lay out a site in CSS, and all it really takes is a solid understanding of the technology.
制作纯CSS布局的工作真的没有秘密的职业酱。有很多方法可以在CSS中布置网站,而真正需要的是对技术的充分理解。
Some people have success with frameworks. I can't really say whether or not they're a good idea, but one benefit is that they abstract away some of the gritty details of building a CSS site.
有些人在框架方面取得了成功。我不能确定它们是否是一个好主意,但一个好处是它们抽象出了构建CSS网站的一些细节。
But you should learn it anyway. There's really two sites I suggest to anyone that really wants to sit down and learn how CSS really works:
但无论如何你应该学习它。我建议真的有两个网站真的想坐下来学习CSS的确如何运作:
SitePoint CSS Reference: Concepts - Probably the most comprehensive explanation of how CSS works in an easy to read guide
SitePoint CSS参考:概念 - 可能是一个易于阅读的指南中CSS工作原理的最全面的解释
W3 CSS 2.1 Spec - A tough read, but it really does explain how everything works
W3 CSS 2.1 Spec - 一个艰难的阅读,但它确实解释了一切如何运作
#8
Learn as much as you can about CSS. A lot of the time when people get frustrated with CSS layouts it's because they don't understand all the ins and outs.
尽可能多地了解CSS。很多时候人们对CSS布局感到沮丧,这是因为他们不了解所有的细节。
Pay attention to things like selector pattern matching - that will make a big difference in simplifying your markup.
注意选择器模式匹配之类的事情 - 这将在简化标记方面产生重大影响。
Remember that it's okay to use tables for tabular data. The table tag is there for a reason.
请记住,将表格用于表格数据是可以的。表标签是有原因的。
A very helpful resource: http://csswizardry.com/web-design+/
一个非常有用的资源:http://csswizardry.com/web-design+/
#1
EvanK's suggestion of working with a CSS framework is a great idea, and personally I would recommend Compass, which to my mind really represents a new way to think about CSS and is generally very elegant. Blueprint has been mentioned by a number of other posters. Compass actually uses Blueprint (or another framework of your choice) and abstracts it even further allowing you to dynamically generate new grid templates. Essentially it gives you a more programmatic framework for working with Blueprint and SASS.
EvanK建议使用CSS框架是一个好主意,我个人会推荐Compass,在我看来它真正代表了一种思考CSS的新方法,而且通常非常优雅。许多其他海报都提到了蓝图。 Compass实际上使用Blueprint(或您选择的其他框架)并进一步抽象它,允许您动态生成新的网格模板。从本质上讲,它为您提供了一个使用Blueprint和SASS的更具编程性的框架。
Before you look into a framework however, getting your head around some fundamentals is essential. W3Schools is a good place to start, followed by some good design blogs like A List Apart.
然而,在你研究一个框架之前,了解一些基本原理是至关重要的。 W3Schools是一个很好的起点,其次是一些优秀的设计博客,如A List Apart。
In terms of minimising cross browser problems a CSS reset is essential, which is the approach Yahoo takes.
在最小化跨浏览器问题方面,CSS重置是必不可少的,这是雅虎所采用的方法。
#2
I was going to recommend the same.. here are the two I like and seem to be the most popular/supported
我打算推荐相同的..这是我喜欢的两个,似乎是最受欢迎/支持
#3
I think a good first step for you is to look into using a CSS framework of some kind. The goal of such frameworks -- according to Wikipedia -- is to "allow for easier, more standards-compliant styling of a webpage", which sounds just like what you're asking.
我认为你迈出的第一步是研究使用某种CSS框架。根据*的说法,这种框架的目标是“允许更简单,更符合标准的网页样式”,这听起来就像你要问的那样。
As for which CSS frameworks to use, I can't recommend anything myself.
至于使用哪个CSS框架,我自己也不能推荐任何东西。
#4
You need to learn how to use CSS. There's plenty of tutorials on the web.
您需要学习如何使用CSS。网上有很多教程。
here's a good one: http://www.barelyfitz.com/screencast/html-training/css/positioning/
这是一个很好的:http://www.barelyfitz.com/screencast/html-training/css/positioning/
#5
I recommend using a CSS framework to get started. You'll get a great grid structure for your pages (like the big name pros use) and rapidly speed up your development time once you get used to a framework.
我建议使用CSS框架开始。您将为您的页面获得一个很好的网格结构(比如专业人士使用的大名称),并在您习惯了框架后迅速加快开发时间。
Because you mentioned yahoo, I recommend their YUI Grids CSS for layout.
因为你提到雅虎,我推荐他们的YUI Grids CSS进行布局。
I prefer the blueprintcss because it has a style reset for default browser styles, and it has a stylesheet for printing as well.
我更喜欢blueprintcss,因为它具有默认浏览器样式的样式重置,并且它还有一个用于打印的样式表。
#6
Frameworks aside, to implement a cross-browser compatible site, I recommend that you initially target a standards compliant browser (like Firefox) and then only after it is working, extend support to less standards-compliant browsers (like IE6).
除了框架之外,为了实现跨浏览器兼容的站点,我建议您最初以符合标准的浏览器(如Firefox)为目标,然后仅在其工作之后,将支持扩展到不太符合标准的浏览器(如IE6)。
My experience is that it is very difficult (nigh on impossible) to initially target a non-standard browser (like IE6) and then make the site cross-browser compatible.
我的经验是,最初针对非标准浏览器(如IE6)并使网站跨浏览器兼容是非常困难的(几乎不可能)。
#7
There's really no secret professional sauce to making pure-CSS layouts works. There are MANY ways to lay out a site in CSS, and all it really takes is a solid understanding of the technology.
制作纯CSS布局的工作真的没有秘密的职业酱。有很多方法可以在CSS中布置网站,而真正需要的是对技术的充分理解。
Some people have success with frameworks. I can't really say whether or not they're a good idea, but one benefit is that they abstract away some of the gritty details of building a CSS site.
有些人在框架方面取得了成功。我不能确定它们是否是一个好主意,但一个好处是它们抽象出了构建CSS网站的一些细节。
But you should learn it anyway. There's really two sites I suggest to anyone that really wants to sit down and learn how CSS really works:
但无论如何你应该学习它。我建议真的有两个网站真的想坐下来学习CSS的确如何运作:
SitePoint CSS Reference: Concepts - Probably the most comprehensive explanation of how CSS works in an easy to read guide
SitePoint CSS参考:概念 - 可能是一个易于阅读的指南中CSS工作原理的最全面的解释
W3 CSS 2.1 Spec - A tough read, but it really does explain how everything works
W3 CSS 2.1 Spec - 一个艰难的阅读,但它确实解释了一切如何运作
#8
Learn as much as you can about CSS. A lot of the time when people get frustrated with CSS layouts it's because they don't understand all the ins and outs.
尽可能多地了解CSS。很多时候人们对CSS布局感到沮丧,这是因为他们不了解所有的细节。
Pay attention to things like selector pattern matching - that will make a big difference in simplifying your markup.
注意选择器模式匹配之类的事情 - 这将在简化标记方面产生重大影响。
Remember that it's okay to use tables for tabular data. The table tag is there for a reason.
请记住,将表格用于表格数据是可以的。表标签是有原因的。
A very helpful resource: http://csswizardry.com/web-design+/
一个非常有用的资源:http://csswizardry.com/web-design+/