有CSS的替代方法吗?


88

是否有样式表格式化语言可以替代CSS?还是CSS是当前用于处理样式表格式化类型内容的单一语言?

我查看了Wikipedia(http://en.wikipedia.org/wiki/Cascading_Style_Sheets)上CSS的文章,以及有关CSS的其他一些评论,并因在不同的Layout引擎中缺乏对CSS的全面支持而灰心丧气。我只是好奇是否有替代方法,或者我必须学习也使用CSS过滤器。

感谢您的任何见解。


10
CSS如果很好*,那是IE损坏了。(* CWG除外)
annakata

74
如果只有另一种选择……我不禁要想到,浪费大量的精力去尝试在CSS中做事情应该是简单的,但不是...
PeterAllenWebb,2009年

8
有趣的是,您必须在与样式相关的标签中输入style =“ text / css” ... :)

3
甚至都不是程序员。在编程中,您在文档中具有从上到下的执行顺序。在CSS中,您甚至没有那个。您有一堆属性可以盲目地从一个完全不同的文档中访问并应用到一个完全不同的文档中,这是一个复杂的静态字符串网络,只有找到前端,您才能开始对其进行分析。您无法分辨出某些效果是从哪里来的,因为在整个文档中都是盲目级联的。
GameKyuubi

1
CSS是声明性的,因为网络是流动的(用户使用的是巨型显示器,笔记本电脑,智能手机还是屏幕阅读器?),所以图形设计师无法在Photoshop中使用他们习惯的技术,例如画布大小在他们的控制之下。同样,由于不同的用户代理呈现的方式不同,因此您必须说“这就是我想要的”,而不是像计算机程序员那样说“这是如何做的”。这并不是说CSS不能使用很多改进,而是变得更易于使用。只是它本质上需要与设计人员和编码人员所习惯的有所不同。
Canuck

Answers:


64

CSS是唯一的真实选择。

一旦了解了CSS的来龙去脉,浏览器对CSS的支持(在大多数情况下)就不会成为主要问题。了解CSS的关键是其目的是定义HTML文档的样式,并且应与内容分开。

您将需要练习来学习如何在不支持功能的浏览器中使性能正常降低。这里的基本思想是,应使最低公分母(通常是Internet Explorer)“足够好”地工作,以免影响用户体验,并为用户提供更好的浏览器。另外,不要先为Internet Explorer开发。保留到最后,然后修复其错误。用另一种方式(首先是IE)做事要困难得多。

您还可以选择使用JavaScript设置样式,但是不建议您这样做,因为您应该避免在JavaScript中应用样式,因为JavaScript是用于逻辑而非样式的。

网页有3个(取决于您的外观)组件:

  • HTML-用于内容
  • CSS-用于样式化内容
  • JavaScript-用于将其他或动态逻辑应用于您的内容

19
关键是第二句话:“一旦了解CSS的来龙去脉,在大多数情况下,对CSS的浏览器支持就不会成为主要问题。” 抱怨CSS最多的人了解的最少。
罗布·艾伦,2009年

1
+1:...以获得出色的答案。建议先编码为标准,然后修补IE粗糙的渲染引擎中的错误的建议绝对是实现此目的的方法。
乔恩·凯奇

当您很好地了解CSS时,IE7实际上表现得很好。@Rob:听到,听到+1。
瑞安·佛罗伦萨

1
使用CSS制作应用程序对于应用程序开发人员是一种折磨。但是,除了Cappuccino.org,几乎没有尝试解决这个非常明显的问题。有传言称xcode将很快产生html5,如果发生这种情况,它将结束这种混乱局面,不是因为xcode是最好的,而是会指导其他人为网络实现SDK,浏览器将附带UI组件(他们仍然会使用css和html来显示它,但谁在乎,我们将不会看到/使用/知道/学习它们)
Devrim,2010年

3
@RobAllen我对我最喜欢的编程语言Malbolge说了同样的话。认为不可能的人只是对它并不足够了解,以至于意识到它有多么伟大。
2012年

68

你们都试图从程序员的角度回答这个问题。我认为原始海报正在寻找一种更加图形友好的替代方案-一种可以提供不同概念的方案。

即使CSS3被跨浏览器采用,我相信CSS的布局方式(嵌入式框,浮点数,边距等)还是很糟糕的。我是一名程序员,但我的父亲是图形设计师,并且我可以肯定,他们使用了20年的布局软件在某些方面比CSS更为简单和先进。


9
没错!CSS和图形布局的认知工作流不在同一抽象级别上。
Alex

5
恕我直言,这个答案甚至在2015
低估了。– Abhinav Gauniyal

13
“我父亲是一名出版商和图形设计师,从我最小的年龄开始就从事平面设计,我敢说他们20年前使用的发布软件比如今的HTML / CSS更先进,更友好。” ...区别是您父亲不是为不同的屏幕尺寸,屏幕阅读器,不同的浏览器版本(具有不同的功能)进行设计等。为打印而设计比为屏幕显示而设计要简单得多,因此CSS是比设计用于布置印刷媒体的语言更复杂。
J. Taylor

1
我建议将Postscript作为一种语言,将PDF作为一种传递工具。我被殴打并以粘性方式被否决。SO上的机器人不喜欢意见。
ATL_DEV

1
@J泰勒,失去它会。使用任何媒介进行设计都不容易。就像编写CSS和HTML一样,这是一种技能,艺术和科学。请尊重艺术。Postscript旨在处理不同大小的媒体,并且已经存在了数十年。HTML和CSS的全部目的是使Web浏览器呈现Postscript默认情况下执行的操作。HTML和CSS太糟糕了!
ATL_DEV

41

的,它叫做LESS,它确实解决了大多数CSS的代码可读性问题。

您都可以使用less.js在服务器上或即时客户端上对其进行编译

对于生产来说,我建议设置一个编译脚本以对其进行编译(在NodeJS中,这与Gruntgrunt-contrib-less无关紧要)。


编辑:还有其他值得一提的选项,即使我正在使用并推荐使用LESS。

SASS:红宝石族很喜欢这个。它不是像LESS那样的CSS超级集,而是使用了自己的语法。为了解决这个问题,他们开发了SCSS,它 CSS的超集,类似于LESS。

手写笔:像LESS一样,它使用javascript编码,但是通常在Node.js中使用。我不能担保它,因为我还没有尝试过,但是它已经很成熟了,所以如果它具有您想要的功能,就一定要使用它。

Turbine:这是用PHP编码的。没有太多的牵引力。

切换CSS:也许Python黑客会希望对此进行调查。更少的牵引力。

如果你感觉更另类,也就是CSS CacheerCSScaffoldDtCSSCSSPP,甚至一些porneL


您可能要检查的其他内容:

Compass:面向Ruby专家的完整CSS创作框架。

WinLESS:适用于Windows的拖放式LESS编译器,非常酷,您应该检查一下。

LESS Elements Preboot LESSHat甚至更少:LESS的mixin和常量库。

Bootstrap:Twitter开发的框架。也相关: HTML5 Boilerplate

Normalize.css CSS重置的替代方法。但是有很多重置,但是作为一个开发商,我不得不说:大多数都是废话。如果您不打算自己做,那就用这个吧。


更新从1.4开始,LESS @extend也是如此。如果可能,请确保使用1.4+!我认为,这完成了选择LESS而不是SASS的原因。


25
不幸的是,这似乎并不能替代模型本身。
n611x007 2013年

1
@naxa,为什么要这样?该模型很棒(样式表),实现很糟糕(CSS)。这些工具仅解决实现问题,因此很受欢迎。
卡米洛·马丁

3
因为竞争助长了进步。“样式表”是什么意思?我将其与级联以及与文本不同的文件/节关联。但是还有更多的盒子模型,使用合并到文本中的标签和容器(带有html)。是否有实现[独立性]?-例如 样式表可以应用于除html / xml之外的任何内容吗?(如果您编写了样式表,并且不想将其应用于基于非GT / lt的文本或二进制格式,该怎么办?您是要重用任何样式表实现还是在野外自行使用?)
n611x007

@naxa的意思是,将样式与内容分隔开的概念是一个很好的模型,这就是我所说的“样式表”。通过实现,我的意思是CSS语法,但是我同意使用LESS代替CSS就像使用CoffeeScript代替Javascript一样。而且,这里有二进制标记格式,所以我不明白为什么不能有二进制样式表,但是如果您考虑一下,它们可能不会被那个名字找到,因为样式表解决了人类的问题(编写样式)对于许多文档),而不是机器问题(否则我们仍将使用<FONT>标签)。
卡米洛·马丁

4
我之所以投票,是因为这些是预处理器,而不是替代方案。它们位于CSS之上,最后输出CSS。因此,它只是一个更高的抽象级别,而并非另一种选择。
ProblemsSuSumit



7

广泛使用的CSS并没有在所有浏览器中得到完全支持...(未知)替代品应如何实现此目标?


3
通过具有可预测,直观且可解决新版本中的问题的布局模型,而不会留下错误。
2013年

7

嗯,几乎所有浏览器都很好地支持CSS 2.1。(除了IE6),一旦知道安全子集,就很容易编写性能下降的CSS。(这样,即使不支持的浏览器也不会完全弄乱页面)

有关CSS浏览器兼容性提示,请参见http://www.quirksmode.org


4
+1为quirksmode-每个以CSS开头的用户都需要了解这一点。我要补充一点,IE7在CSS2中也很糟糕,不幸的是,大多数网络(以及几乎所有公司网络)仅是IE 6和7,因此您必须谨慎使用CSS2。
基思


6

对于在不同的布局引擎中缺乏对CSS的全面支持感到沮丧

我认为jQuery有一些方法可以使CSS在跨浏览器之间更加兼容,即,如果您使用jQuery指定某些属性,则它将尝试确保对不支持某些功能的浏览器使用替代方法。

还有一个名为CleverCSS的项目,您可能想检查一下。它不是它的替代方法,只是定义它的方式略有不同。


不幸的是,该链接已经死了.. :-(
八月

4

我查看了Wikipedia(http://en.wikipedia.org/wiki/Cascading_Style_Sheets)上CSS的文章,以及有关CSS的其他一些评论,并因在不同的Layout引擎中缺乏对CSS的全面支持而灰心丧气。我只是好奇是否有替代方法,或者我必须学习也使用CSS过滤器。

CSS是标准。没有替代。

所有浏览器都支持基本的CSS功能。(四个?)主浏览器行的每个新版本都增加了对该标准的支持,但是使用这些功能的网站将被早期版本中的所有用户破坏。有两个答案:

  1. “优雅降级”(或它的双胞胎,“渐进式增强”-Google),其中页面会利用高级功能(如果可用),而在高级功能不可用时仍可继续工作。

  2. 你的听众是谁?如果您很幸运地知道网站的99.8%的访问者将至少使用IE7,那么您不必担心IE6中损坏的CSS功能。不过,这取决于您自己的业务,因此请先检查事实。

最糟糕的事情是对单个特定浏览器的古怪代码进行编码,因为这导致页面不仅在其他浏览器上甚至在同一浏览器的更高版本上都损坏。


4

很久以前,JavaScript样式表(JSSS)的另一种选择是Netscape提出的一种样式表语言技术,如果有兴趣的人,我会给你一些链接 http://en.wikipedia.org/wiki/JavaScript_Style_Sheets

这是建议 http://www.w3.org/Submission/1996/1/WD-jsss-960822 我认为这是一个好主意,但可惜的是CSS胜了,但也许某些部分已经与javascript集成了?

另外,也许可以使用svg代替css来实现某些文本效果,请查看示例
http://msdn.microsoft.com/zh-cn/ie/hh410107.aspx
和一些动画
http://svg-wow.org/ text-effects / text-effects.xhtml
一些按钮效果https://www.svgopen.org/2008/papers/86-Achieving_3D_Effects_with_SVG/
这是一个样式文字的酷示例,您应该在http://www.hongkiat上查看.com / blog / scalable-vector-graphics-text /


3

唯一的选择是HTML本身已弃用的格式支持,例如<font>标记。但是您不想这样做。8)


7
如果您使用<font>,您可能还会受到来自其他像我这样的Web开发人员的强烈憎恨:p(至少如果他们必须阅读/修复您的代码...)
Svish

3

不,CSS是现在要走的路。格式本身没有什么错(我个人实际上很喜欢它),而仅仅是浏览器支持它-特别是关于IE。一旦我们有了所有支持CSS3的主流浏览器,一切都会好起来的-尽管我不太乐观何时会发生这种情况。


9
格式本身没错吗?引用Jeff Atwood的话:“总而言之,CSS违反了DRY原则。您不断地,不可避免地重复自己。(缺少变量,所以我们不得不在各处重复颜色。缺少嵌套,因此我们必须重复遍历整个CSS的巨大代码块。)这也是我的经验,您可以擅长于此,但这与它的语言优势无关
Peter

3

目前没有CSS可以替代,这是一件好事。浏览器供应商,W3C,WHATWG等都很难就单一规范达成一致,您能想象如果存在多个规范会发生什么情况?

无论如何,我发现一旦学习CSS,您将了解哪些特定的事物会破坏事物,并学会使用它或避免使用它。

希望这可以帮助。


11
“ CSS现在别无选择,这是一件好事。”,我谨此表示不同。
甘道夫

在Darko概述的Good的狭义规范中,这是一件好事。
Dom Vinyard


2

否(大部分)

如果要创建可在最大数量的客户端计算机上使用的布局,则必须学习CSS。

如果您可以将用户限制为IE8,Chrome,Safari和Firefox,则可以摆脱CSS2,否则您将不得不学习CSS1的所有差异以及无数的问题-特别是IE5和6 。

HTML 3.2包含一些格式标记(例如<font><center>),但您不能做太多事情。

为什么只有大多数?-如果您可以假设用户拥有Flash或Silverlight并为其构建Web应用程序。这样您的布局将是完美的,但是它需要一个客户端插件(并非每个人都具有)才能正常工作。如果您需要真正丰富的客户端UI,我只会走那条路。


实际上,使用HTML 3.2格式标记和基于表的布局,您可以做很多事情。例如,这是我的旧网站(大约有10年历史):itek.at/alt/ganzneu-eng.html
Erich Kitzmueller 09年

您实际的网站也是用布局表完成的。您失去了*可访问性,*维护能力,*其中有30%的互联网用户使用了得心应手,*基于机器的解释(例如google)* ...
vikingosegundo

在带宽,可访问性或维护方面,现代开发无法接受3.2的任何功能。如果不需要的话,降级只是没有目的。
annakata

@ammoQ-是的,您可以,但是需要一段时间,并且是改变的母马。追溯到00年代初期,网站设计是要切成一个大图像,然后将拼图拼成一张桌子。我做了很多,但与现代产品相比并没有那么好。您可以通过这种方式创建网站,但看起来它的上一次更新时间是2002
Keith,

2

我同意CSS支持的当前状态非常糟糕。

我认为最好的方法是根据标准编写CSS ,然后在各种浏览器未正确遵守的情况下为所有位添加修复程序。不过,通常值得避免使用CSS(例如,z级别在许多浏览器中确实具有混合的支持级别)。


1

佐利是对的。“ xslt是替代方法”

XSLT将XML转换为呈现的网页,就像CSS将HTML转换为呈现的网页一样。请注意,您不能将XSLT与HTML或CSS与XML混合使用。

我已经使用CSS + XSLT来创建渲染的网页。



0

Adobe Postscript是CSS的最可能替代品。问题在于它需要Acrobat在桌面或Web上查看它。它远远优于CSS,并且可以保持设计意图并在所有设备(包括打印机,绘图仪,电话,平板电脑以及几乎所有带有Postscript解释器的设备)上进行缩放。

后记具有零学习曲线,除非您为特定设备实现它。它由数百万程序员,图形美工,美工,专业打印机甚至技术水平最低的家用计算机用户编程。您需要做的就是从任何应用程序的菜单中选择打印或保存,它确实支持链接和字段输入。它可以搜索吗?正是基于PS的文档经常出现在Google的搜索页面中。

尽管可以通过Web浏览器以PDF的形式查看它,但它不是HTML和CSS之类的本地浏览器语言。如果它是如此简单和强大,为什么不呢?当网络开始时,Adobe太近视了,贪婪地开放了该语言。他们想向其PS引擎及其内容创建产品出售许可证。对Adobe而言,赠送PS浏览器就像赠送鹅和金蛋。


-6

xslt是替代方法

它比CSS更强大。

学习和使用它更加困难。


4
XSLT如何替代CSS?他们做的事情完全不同。
Shiny和New安宇先生,2009年

我认为他们可能会喜欢XSL-FO,这很好,但是AFAIK在浏览器中不起作用。
杰里米·法兰西

1
不,我不是说XSL-FO,而只是XSLT。在XSLT中,您可以表示转换,因此,在XSLT中,您可以表示可以用HTML表示的任何格式。好的,这还不及CSS所能做的,但是我没有说XSLT是一个完美的选择。XSLT内容也位于单独的文件中,例如CSS,从HTML可以引用XSLT文件。由于这两个属性,一个人就可以对其基于HTML的文档进行格式化,而无需太多冗余。XSLT可在Firefox,IE中运行,我尚未测试其他产品。
libeako

4
不,卓利 您无法使用XSLT进行格式化。您可以干扰原始代码,对其进行转换,将其添加到id或从中删除等。但是您无法设置其样式……
Gabriele Petrioli 2010年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.