【问题标题】:Is CSS giving error?CSS是否给出错误?
【发布时间】:2016-01-15 04:32:26
【问题描述】:

在最近的一次面试中,面试官问了我“CSS 会出错吗?”这个问题。

是否有在 CSS 后面工作的解释器阻止程序的执行?或者我们可以说 CSS 没有给出任何错误?我仍然不知道这个问题的答案是什么,因为面试官也没有说什么。

【问题讨论】:

  • 听起来面试官“犯了错误”
  • 我没有看到 CSS 抛出任何错误。
  • 这是一个非常奇怪的问题,尤其是这样的措辞。也许面试官正在考虑 CSS 验证?
  • 在控制台中,如果背景图片路径不正确会显示如下错误:Failed to load resource: net::ERR_FILE_NOT_FOUND
  • @om。那不是 CSS 抛出错误。那是浏览器出错,因为它无法加载资源。

标签: html css dom


【解决方案1】:

CSS 本身不会出错,但是语法错误的 CSS 将无法正确呈现。浏览器可能无法理解给定点的含义,因此无法正确格式化页面。

CSS 在语法上的正确性也有所不同,其中所有内容都正确封闭并终止了行,并且符合 W3C 规范的标准。

编辑:(语法正确性和标准合规性示例) 以下是语法正确的 CSS 示例,它不会在 W3C CSS Validator 上验证失败:

p.my-class {
  color : red;
  -moz-border-radius : 3px;
}

虽然这在技术上是有效的 CSS,但根据 CSS 2.1 语法的 vendor specific extensions 部分,应避免使用它们。它是使它们有效的初始破折号或下划线。

【讨论】:

  • 第二段是什么意思?
  • @FarzadYZ 我添加了一个示例来说明我在该段落中的意思。
【解决方案2】:

我认为这个问题太宽泛,不够具体。 我会这样回答这个问题。

CSS 是否报错?

取决于您正在查看的位置。 在 IDE 中?确保它会显示验证错误。 在浏览器中?大多数浏览器倾向于忽略 CSS 验证错误并继续执行其余规则。正如@Kishan Choudhary 在另一个答案中提到的那样,“CSS”只是指样式语言,语言本身不能提示您错误。

替代。问题:我们如何验证/调试/查找 CSS 中的错误?

我们能说 CSS 没有报错吗?

同样,这取决于您正在查看的位置。 在开发环境中?是的,几乎所有的 Web IDE 都会帮助您发现 CSS 错误。

在客户端浏览器中?没那么多,如果可用,您可以打开浏览器控制台/开发人员工具,并且可能会出现日志错误,例如您在 CSS 中使用的图像的 URL 无效或无法访问。又是 CSS 语法还是验证错误?不是

是否有在 CSS 后面工作的解释器阻止执行 程序?

是的,每个浏览器都有一个内置的符合 W3C 标准的 CSS 解释器/解析器,它喜欢阻止执行吗?不,所有大多数浏览器的正常行为都是忽略(不阻止解释和应用剩余的有效样式规则)CSS验证错误并继续执行其余规则。

更新:处理 CSS 解析错误的 W3 指南

层叠样式表第 2 级修订版 1 (CSS 2.1) 规范

4.2 Rules for handling parsing errors

在某些情况下,用户代理必须忽略非法样式表的一部分。 该规范将忽略定义为表示用户代理解析 非法部分(为了找到它的开始和结束),但是 否则就好像它不存在一样。 CSS 2.1 为 CSS所有属性的未来更新:值组合和@-keywords 不包含以破折号或下划线开头的标识符。 实现必须忽略这样的组合(除了那些 由未来的 CSS 更新引入)。

确保新属性和现有属性的新值 以后可以添加。

CSS 语法模块第 3 级

2.2. Error Handling

当 CSS 发生错误时,解析器会尝试优雅地恢复, 在返回之前只丢弃最少量的内容 正常解析。这是因为错误并不总是错误 - 新 语法看起来像旧解析器的错误,它很有用 能够为语言添加新语法而无需担心 包含它的样式表在较旧的 UA 中被完全破坏。

【讨论】:

    【解决方案3】:

    通常,CSS 中的错误不会导致浏览器中出现任何错误消息。任何不正确的代码都会被忽略(或者在某些情况下通过假设缺失部分来接受,例如长度单位)。

    CSS 解析器会尝试在每个错误代码后进行恢复,因此通常它只会影响错误所在的样式或规则,解析器不会停止解析其余的 CSS 代码。

    部分浏览器会在错误控制台中添加针对 CSS 错误的警告,因此开发者可以打开控制台查看是否有错误。

    【讨论】:

    • 您能否举例说明浏览器 假设缺少部分的位置,例如长度单位,不是0?
    • @torazaburo:在 quirks 模式下的 Internet Explorer 假定没有单位的像素。
    【解决方案4】:

    CSS 是否报错?

    是的,任何 CSS 解析器无法理解的规则都会导致错误。一般来说,系统/程序无法处理的任何数据都会导致错误。但是系统最终如何处理这个错误是你的问题,它可以是

    1. 忽略错误并继续处理。
    2. 停止进程。

    CSS 解析器不会因错误而停止。如果它发现任何无法解析/在specs 中提及的无效css 属性,它只会将错误日志 放入控制台,并忽略(1)所有css 规则数据,直到找到下一个@987654322 @。

    正如 w3c.org 文档所说

    UA 必须跳过声明,其中包含无效的属性名称或 无效值。

    这里的UA(用户代理)在我们的例子中是指浏览器。因此必须跳过无效的 css 键/值,并且浏览器供应商可能会选择在 devtools/firebug 中显示错误以帮助开发人员修复它。此外,是否放置错误日志取决于浏览器供应商。

    【讨论】:

      【解决方案5】:

      某些浏览器会在控制台中报告 CSS 错误。我想到了 Firefox。

      <style> foo { bar: baz; } </style>
      

      导致错误:

      未知属性“bar”。声明被放弃。 css-error.html:2:11

      但是,这不会“阻止程序的执行”。

      据我所知,Chrome 中不存在类似的功能。

      【讨论】:

        【解决方案6】:

        在 CSS 中没有错误,但您可能会在浏览器的控制台中遇到一些错误, 那可能是浏览器给出错误但不是 CSS 抛出错误。

        【讨论】:

          【解决方案7】:

          我认为“CSS 会出错吗?”语句有歧义,但我们先看一下this link (CSS 2.1 Specification),跳转到4.2 处理解析错误的规则

          规范明确规定了如何忽略解析错误,实际上是这样说的:

          This specification
          defines ignore to mean that the user agent parses the illegal part (in order to find
          its beginning and end), but otherwise acts as if it had not been there
          

          事实上,在同样的情况下,它甚至指定了如何将无效的 css 变成有效的:

          User agents must close all open constructs (for example: blocks, parentheses,
          brackets, rules, strings, and comments) at the end of the stylesheet. For
          example:
          
          @media screen {
            p:before { content: ’Hello
          
          would be treated the same as:
          
          @media screen {
            p:before { content: ’Hello’; }
          }
          

          所以从这个角度来看,CSS 永远不会“给出”错误,因为任何错误都会被有效地解析和修复或忽略,但永远不会停止规则或解析器的执行。

          但是,如果您让一位开发人员在 IDE 前与另一位开发人员交谈,我认为在参考 IDE 消息时问“CSS 是否给出错误”就足够公平了,事实上,如果我们查看 @ 987654322@ 我们在文档中可以清楚地看到解析器可以给出错误信息,只是浏览器被直接指示忽略错误。

          【讨论】:

            【解决方案8】:

            CSS 不是真正的编程语言,而是特定领域的语言 (https://en.wikipedia.org/wiki/Domain-specific_language)。

            与 JavaScript 或 PHP(图灵完备的编程语言)等脚本语言以及 Java 或 C 等真正的编程语言相比,CSS 不会“出错”,因为 CSS 代码不是真正的程序源代码。

            然而,与任何领域特定语言一样,CSS 都有语法并由解释器读取(非常类似于声明性的图灵完备编程语言)。

            如果语法不正确(在此处测试:https://jigsaw.w3.org/css-validator/#validate_by_input),则 CSS 无效。这取决于使用的解释器如何处理无效的 CSS 部分,普通 Web 浏览器中的解释器不会因 CSS 语法错误而停止。

            因此无法明确回答这个问题:

            • CSS 可能无效(语法)
            • CSS 可能有“语法错误”
            • CSS 不会“给出”错误,错误通常会被普通解释器忽略

            【讨论】:

              【解决方案9】:

              @om。是的,它可以阻止您的程序,但在非常落后的情况下。例如,如果您对元素的宽度进行中继,并且如果您将 display:none 设置为元素并且没有做出返回 undefined 的案例,您的应用程序将卡住,因为您的参数将没有值。

              因此它可以防止执行与其他语言的干扰。

              但是其他人在他们的答案中怎么说,只有 css 可以因丢失文件或类似的东西而引发错误,但它不会停止应用程序的执行。

              但是当 css 属性可以使 jquery 方法无法正常工作并且为此 jquery 抛出错误并停止应用程序的执行时,我看到了一个问题。

              【讨论】:

              • 此示例可能是您的应用程序中的错误/错误,而不是 CSS 解析错误。
              • @IMI 你是对的,但在这种情况下它将停止程序的执行。作者问“是否有一个解释器在 CSS 后面工作,它会阻止程序的执行?”当我发现这种情况发生时,我有了一个想法,这不是口译员,我列出了可能发生冲突的情况。看看我写了什么,当你以非常罕见的原因中继它时,css 可能会出现问题。但是,如果只有 css 可以引发错误并阻止应用程序继续运行,答案是否定的,它不会发生。
              【解决方案10】:

              css 可以通过这种方式阻塞程序,如果你有按钮并且某些 css 属性不允许它在你的页面上很好地显示,在这种情况下我们可以说它是阻塞的,否则 它不是执行的障碍。 即使错误也不会阻止执行,它只是放错地方或不正确地显示内容

              【讨论】:

                【解决方案11】:

                答案取决于您如何定义错误

                1. 如果 Error 意味着发生了一些意想不到的事情,那么 CSS 肯定会出错,因为,如果你的语法有问题,它就不会起作用。

                2. 如果 Error 意味着向浏览器或控制台抛出一些东西,CSS 不会这样做。

                3. 如果 错误 意味着中断工作流并停止执行下一部分代码,CSS 不会。

                如果您考虑第 2 点和第 3 点,您可能会考虑 CSS 错误,例如 PHP 或其他编程语言中的警告。唯一的区别是,在 PHP 中,我们可以选择打开它们以在浏览器中抛出一些东西。 CSS 到现在还没有这样的选项。

                【讨论】:

                  【解决方案12】:

                  CSS 渲染是浏览器(或类似)的过程,旨在不“抛出错误”(异常等)。 ...理论上。

                  (库/依赖项中的错误可能导致真正的错误,例如某些字符组合吓坏了更大的操作系统。这些错误在所有操作系统及其他操作系统上都有很好的记录,但在此调查的边缘运行)

                  我从许多来源多次读到,每个浏览器都希望有一个兼容的 CSS 功能,并尽最大努力“吸收”错误或错误百出的语法,并尽快恢复。让 CSS 解释器挂起(错误)是完全可能的,但我一直认为 CSS 解析的最终实现是 Python 中主要反模式的一种风格:

                  # bad code, just some theory, my Python code "always works"
                  try:
                      # code
                  except:
                      pass
                  

                  所有错误都被吞没了。

                  正如其他人所说,“CSS 会出错吗?”是一个不好的或可能是诡计的问题。 CSS 是语法或语言。

                  真正的意义在于:语言不会出错,也不会出错。只有语言的解释可能会提供错误(作为评估的产物)。只有评估才能发现错误。

                  如果在问题中添加了“解析器”一词,则为“是”,CSS 解析器出错。但正如您(未编辑)帖子中的那句话,我会用一些语言上的呐喊和一点 CS-101 来回答:不,这就是为什么......

                  程序员 + 语言学家给我的 0.02 美元。

                  【讨论】:

                  • 这是一个轻微的学术区别。按照你的逻辑,我们不能说 JS 会抛出错误,只能说 JS 解释器在解释 JS 时会抛出错误。但是说 CSS 解析器出错 也是不正确的。事实上,问题的全部意义和答案在于它没有
                  • @torazaburo 我同意,现实中的语义。做过很多采访,也接受过太多的采访,我不喜欢恶作剧或垃圾问题以及各种肮脏的程序员技巧。你的“它没有”的陈述是恰当的,因为答案既不是是也不是不是,而是布尔逻辑中的另一个选项“未设置”又名 null 或您的语言可能使用的任何内容。我仍然主张在垃圾问题上站稳脚跟,我认为这就是一个例子。
                  【解决方案13】:

                  “CSS 是否给出错误?” - 没有

                  CSS 本身不会出错。如果它不正确,它将忽略该属性。如果存在语法错误,那么它也会忽略相同的内容,并且如果任何其他选择器由于语法错误(例如缺少 '}')而受到影响,也将被忽略。

                  有各种 IDE(如 Visual Studio)突出显示您的错误。 正如 gabe3886 所说,您还可以使用 W3C CSS Validator 验证您的语法

                  【讨论】:

                    【解决方案14】:

                    不,CSS 永远不会出错。您将无法在控制台或任何由 CSS 引起的错误。

                    由于 CSS 只是样式语言,如果某些内容没有按预期设置样式,则不会报告为错误。

                    要注意我们有错误的 CSS 代码,我们将不得不查看页面,并且页面上的某些元素将按预期呈现。有一些调试 CSS 代码的技巧。

                    【讨论】:

                      【解决方案15】:

                      html是一种标记语言,它不包含错误如css
                      如果出现问题,它会尝试显示正确的内容
                      css 没有错误,但是 警告 我们可以在控制台中看到特定属性 invalid
                      比如在safarimozilla查看时使用-webkit-

                      【讨论】:

                        【解决方案16】:

                        不,“CSS 不会出错”,但我认为面试官可能错误地陈述了问题。

                        如果面试官没有错误地陈述问题,那么我们可以明确地说不,CSS 不会给出错误。 CSS 规范中没有评估器或编译器来扫描您的级联以查找错误。甚至可以说 浏览器 没有对 CSS 的错误处理,因为所有常用的浏览器实际上都会丢弃错误编写的声明,然后搜索最近的分号,然后返回读取级联.

                        Tab Atkins Jr has a good explanation of how browsers handle errors in CSS 以及他们为什么要这样处理。

                        如果浏览器在尝试解析声明时遇到无法理解的内容,它会丢弃声明,然后向前查找,直到找到不在 {}、[] 或 ( ) 块。

                        因此,如果面试官试图回答这个问题,我想你可以自信地回答不,CSS 没有给出错误。但是,面试官很可能并不真正理解 CSS 或浏览器如何解释 CSS,并希望你在 CSS 块中找到错误。永远不要害羞地问面试官当他们问一个问题时他们可能意味着什么,或者如果你听不明白的话。

                        【讨论】:

                          【解决方案17】:

                          CSS 是否报错? CSS 是否可以通过自己的独立“编译器”独立工作?

                          当然,不是,因为对于 CSS,浏览器是执行过程的组件,它会给出错误,而 CSS 本身不能。

                          示例

                          #foo{
                              Bar: 50%;
                              Nonsense: 100%;
                              color: red
                              }
                          

                          在这种情况下,浏览器将忽略 Bar ans Nonsense 属性并跳转到颜色属性。并且 您不会抛出异常或错误,这与 JS 不同(仅用于比较)。 所以显而易见的答案是否定的!

                          【讨论】:

                            【解决方案18】:

                            是的,有时CSS也可以给出错误,但这不是通过错误,而是在语法有错误的地方停止样式。

                            CSS

                            .myClass {
                                color : red
                                background-color : green;
                            }
                            

                            这段代码会报错,在这种情况下代码不会执行。

                            【讨论】:

                              【解决方案19】:

                              在结论中,我可以用@Kishan Choudhary 的话来说:“CSS 会出错吗?” - 没有

                              但可能存在解析和浏览器错误。

                              这些点有助于我得出结论。

                              1. CSS 本身不会出错。 (@gabe3886)
                              2. 通常,CSS 中的错误不会导致浏览器中出现任何错误消息。任何不正确的代码都会被忽略 该规范明确指定了如何忽略解析错误。 (@Guffa)
                              3. CSS 解析器不会因错误而停止。如果它发现任何无法在规范中解析/提及的无效 css 属性并忽略(1)所有 css 规则数据,直到它找到下一个,它只会将错误日志放入控制台;。 (@rajuGT)
                              4. 必须跳过无效的 css 键/值,浏览器供应商可能会选择在 devtools/firebug 中显示错误以帮助开发人员修复它。 (@rajuGT)
                              5. “CSS 是否出现错误?” - 没有 | CSS 本身不会出错。如果它不正确,它将忽略该属性。 (@Kishan Choudhary)
                              6. 但是,与任何特定领域的语言一样,CSS 都有语法并由解释器读取(非常类似于声明性的图灵完备编程语言)。 (@Blackbam)
                              7. 是的,它可以阻止您的程序,但在非常落后的情况下。 (@George Plamenov Georgiev)
                              8. CSS 永远不会“给出”错误,因为任何错误都会被有效地解析和修复或忽略,但永远不会停止规则或解析器的执行。 (@Eduardo Wada)
                              9. 是的,有时CSS也可以给出错误,但这不是通过错误,而是在语法出现错误后停止样式。 (@Kamal Kumar)
                              10. 大多数浏览器倾向于忽略 CSS 验证错误并继续执行其余规则。 (@DeshanR)
                              11. 在控制台中,如果背景图片路径不正确,将显示如下错误:加载资源失败:net::ERR_FILE_NOT_FOUND (@om)
                              12. @om,这不是 CSS 抛出错误。那是浏览器给出错误,因为它无法加载资源。 (@Farzad YZ)

                              谢谢各位。

                              【讨论】:

                                猜你喜欢
                                • 1970-01-01
                                • 2021-04-02
                                • 1970-01-01
                                • 2019-08-30
                                • 1970-01-01
                                • 1970-01-01
                                • 2015-01-02
                                • 1970-01-01
                                • 2016-03-12
                                相关资源
                                最近更新 更多