【问题标题】:Is it practical to build a web site using strict XHTML and relying on CSS 100% for visual style?使用严格的 XHTML 并依赖 CSS 100% 的视觉样式来构建网站是否可行?
【发布时间】:2009-01-12 15:47:11
【问题描述】:

我倾向于经常采用学术方法,并在我的开发过程中坚持严格的原则,而现实情况是,如果我稍微不那么谨慎,我本可以更快地完成项目。我正在寻找合适的实用性。

我想采用“禅”的方式来设计一个网站(用我的话来说)“严格使用 HTML 来构建内容结构,让 CSS 魔法来完成剩下的工作”。这在现实中有多实用?我遇到的一个问题是我想先开发(使功能正常)该网站,然后再回来设计它。我知道结构方面我希望网站如何流动,但我什至还没有开始使用 CSS 布局、图形或任何其他设计元素。这里的正确方法是什么?

【问题讨论】:

  • 等等,你的意思是我不应该使用 标签?
  • @theman_on_vista:哈哈……为了你好,我真希望是讽刺。

标签: css xhtml standards


【解决方案1】:

它绝对实用,并提供无限的好处。事实上,这正是 CSS 以及内容和布局分离的目的。

根据上述情况,正确的方法是让不同的团队继续手头的不同任务。这需要(也许)一个可能相当粗糙的初始图形设计,以及一套记录在案且经过协作商定的命名约定,例如“#viewport”、“.user”等。

标记团队通常由后端驱动,通常会稍微领导设计团队,但他们应该而且必须保持足够的灵活性,以便在需要时更改标记,或者将其置于设计师的控制之下。

最后一个只是我的 $.02,但是如果一个人同时担任两个角色,我认为您首先要引导自己使用标记/后端,然后根据需要迭代地进入设计阶段,然后是标记,然后是设计。

【讨论】:

  • 很好的答案 - 但我会反对“无限收益”
  • “无限”?我的阅读是它除以零的好处/痛苦,这几乎是内联样式的倒数
  • “我不想知道某样东西设计做什么,我想知道它可以做什么”- Gene Kranz (阿波罗 13 号)... 总是有一个浏览器可以搞砸你。你知道它是什么。
【解决方案2】:

您要遵循的方法是正确的。只有两件事:

  1. 如果您对 css 或 html 使用验证器,请不要假装您的所有 html 或 css 都通过了测试。显然,理想的目标是验证一切,但在第一阶段,我认为最好不要在验证问题上花费大量时间。请记住,没有一个验证器是完美的,一开始就使用它的好方法是引导您朝着正确的方向前进并避免大错误(即在一个页面中放置两次相同的 id,或者将块元素放入内联的元素中。 ..)。然后,当应用程序处于良好阶段时,您可以使您的 css 和 html 完美有效。
  2. 不要在最后设计界面。我认为应用程序的界面也可以为您提供如何开发后端的良好指导。所以,在你那里,我会先设计界面,用 html 和 css,然后我会开始给它添加功能。

(对不起我的英语,欢迎拼写更正。)

【讨论】:

  • 第 2 点 +1,没有足够的程序员受“用户故事”和产品实际使用方式的驱动
  • 你是对的。在成为开发人员之前,我开始担任网页设计师,但我的很多同事认为界面就像应用程序中令人讨厌的部分一样。
  • +1 表示第一点。但我不太同意第二个。 人从简单的布局开始,即兴创作,并提出了很棒的网站(它包括你的网站和合作伙伴。:D)对于 anakata - 想想初创公司。对于 EA 或其他规模的网络开发商店,您的观察可能是正确的。
  • 当我说“不要在最后设计界面”时,我的意思是最好从考虑界面的功能和动作开始,这样你就可以考虑交互使用您的软件的用户。一个非常简单的布局 - 或模型 - 是完美的。你不需要创建一个很棒的界面——也许一个优秀的平面设计师可以做到这一点。
【解决方案3】:

它非常实用,您会惊讶于您的 HTML 看起来多么干净。我喜欢使用 CSS 重置文件来帮助入门,我个人喜欢 YUI reset。另一个需要考虑的禅宗项目是使用unobtrusive JavaScript。这进一步分离了代码的不同层。 JavaScript 库,如 jqueryprototypedojo 可以帮助解决这个问题。

【讨论】:

  • 不错的链接 - 谷歌“Erik Meyer 重置”以获得替代 CSS 重置
【解决方案4】:

这是可以做到的,我认为您的网站(以及您的网页设计技能,尤其是)会因此变得更好。但它也有一定的学习曲线。它要求对 XHTML/CSS 规范的理解比很多人都更透彻。

确保您的 HTML 可以通过验证只是开始。 哦,确保所有浏览器在渲染页面时都以严格模式运行。

当然,您需要解决方法来支持 IE,但这可以通过多种方法来完成。 首先,IE 支持条件 cmets,允许您包含特殊的 CSS 样式表来修复 IE 错误,这应该可以帮助您完成大部分工作,而不会影响您符合标准的页面版本。

对于某些事情,您可能还需要一些 javascript,但对于大多数常见功能来说,这不是必需的。

【讨论】:

    【解决方案5】:

    http://www.webdevout.net/articles/beware-of-xhtml 中解释了今天反对使用 XHTML 的原因。总而言之,XHTML 不受支持,除非您将其作为此类服务,并且如果您针对的是较旧的浏览器(任何 IE 版本都是旧的,考虑到它的大多数功能在它们仍然不成熟并且有一段时间没有发生实质性变化时实现),您别无选择,但将其作为 HTML 提供。

    除非您不需要 XML 提供的功能(如 SVG、MathML),否则请坚持使用 HTML。与 HTML 相比,您不会有任何明显的优势,更具语义性,拥有更好的 CSS 支持(甚至更少)。但是您获得了更广泛的兼容性,并且您的布局将更加可预测(例如,表格单元格可以从 HTML 中的行中的第一个单元格继承,在 XML 中没有这样的东西,甚至不确定 XHTML 在某处有任何例外)。

    验证器对编写 XHTML 的帮助不亚于 HTML。甚至很烦人,如果您使用严格的,如果您撒谎并说它是 HTML,那么您会想知道 br 标签中的 / 有什么大惊小怪的。 (如果您将 XHTML 作为 HTML 提供,Firefox 视图源将显示为鲜红色)。我相信您可以找到更多示例。

    【讨论】:

      【解决方案6】:

      当然,你可以这样做,但要准备好它不会在 IE 下呈现。在最近的一个 Web 项目中,我们的大部分前端缺陷是修复 IE 中已经在 Firefox 中运行良好的东西。也许这会在 IE8 中改变,但我对此表示怀疑。在某些情况下,我们甚至不得不编写一些在 IE 上执行的 javascript,以解决仅使用 CSS 无法完成的事情。

      【讨论】:

      • 它将呈现,知识和耐心。
      • 同意尼克的观点,你工作越多,解决问题所需的努力就越少。而且 IE8 会修复很多问题。
      • 这只是经验和/或雇用更好的前端开发人员的问题 - 它可能的
      • @annakata - 在某些极端情况下,仅使用 XHTML/CSS 就很难在所有浏览器中工作而无需重新设计 UI,尤其是在 IE6 中。就像使用表格进行布局一样,在某些时候您需要务实,尤其是在业务中。
      【解决方案7】:

      虽然理论上听起来不错,但您不能 100% 使用 css 为网站创建布局。您仍然需要使用一些标记,以便您可以应用 css。也就是说,您可以使用此方法非常接近理想状态。我一直对真正的 css 大师实际上只需要这么少的标记感到惊讶。

      更接近您真正寻找的“禅”方法是 xslt。它通过您的应用程序生成 xml 数据然后 xslt 将该 xml 转换为 html/css 来工作。这需要学习 xslt 并为生成页面的过程增加了另一层复杂性,但增加了您正在寻找的分离。在理想的世界中,理论是程序员只需要担心生成 xml 数据,然后设计人员可以使用该数据生成视觉效果,但是它很少以这种方式工作,因为 xslt 的技术性超出了大多数设计人员的处理能力。大多数情况下,程序员最终会生成 xslt,这在某种程度上违背了目的。

      【讨论】:

        【解决方案8】:

        对我有用的一种方法是首先构建 HTML,然后在同一文件的标签中添加一些最小的 CSS(足以创建正确的布局等)。然后,一旦您对结构感到满意,您就可以将 CSS 提取到单独的文件中和/或完全重做 CSS。这对我来说达到了正确的平衡 - 它仍然是一个轻量级的过程,但它避免了查找和替换内联 CSS 的潜在麻烦。

        【讨论】:

          【解决方案9】:

          理论上是的,实际上,浏览器的差异可能会迫使您添加一些 javascript 来处理差异。

          【讨论】:

          • 这太可怕了!如果用户关闭了 JS 怎么办?布局应该完全由 CSS 驱动(我还没有遇到无法实现的情况)
          • 我知道这应该是可能的。我在该领域的经验是,theoria 很少获胜......
          • 那么我认为您应该将问题作为问题发布在这里并让 SO 解决它们。这里有很多聪明的 CSS 人。
          • annkata 示例:将 div 设为父 div 宽度的 50% 和 10 px 边框。完全使用 CSS 驱动布局的人只会禁止 CSS 无法表达的所有内容。这种精神上的限制对程序员很有效,但对设计师却不是那么好。
          • “禁止 CSS 无法表达的一切”是什么意思?很多人似乎认为有些布局只能用表格完成,CSS 不行。这根本不是真的。
          【解决方案10】:

          现在... 做某事的好处与实际操作不同。你们是否忘记了 IE,甚至忘记了那些想要完成不可能的事情的客户?

          我很想说您必须对您使用的严格 DTD 做出一些例外,以使其在合理的浏览器组中运行,并取悦网站/网络应用程序的利益相关者。

          我是一个标准狂,如果可以建立一个不违反一条 DTD 规则的网站,没有人会比我更高兴。但 4 年后,我只是无法做到实际目的

          当然,如果我是为我要开发的网站提出要求的人,那是可能的,但我必须改变业务规则以适应这种情况。相信我,这是唯一可行的方法。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2019-06-18
            • 2021-12-27
            • 1970-01-01
            • 1970-01-01
            • 2019-07-05
            • 1970-01-01
            相关资源
            最近更新 更多