CSS铁路图

最新推荐文章于 2024-06-19 17:54:04 发布

cunbei2644

最新推荐文章于 2024-06-19 17:54:04 发布

阅读量408

点赞数

文章标签： python java css 人工智能 javascript ViewUI

原文链接：https://www.phpied.com/css-railroad-diagrams/

版权

So next step after the sexy CSS lexer is parsing. But first - railroad diagrams to help visualize how/when the tokens make sense forming valid CSS code.

因此，在解析性感CSS词法分析器之后的下一步。但是首先-铁路图有助于可视化令牌形成有效CSS代码的方式/时间。

Below is what I have so far. It includes pretty much everything except selectors. Selectors are getting increasingly complex, come to think of it.

以下是我到目前为止的内容。除选择器外，它几乎包含所有其他内容。选择器变得越来越复杂，请考虑一下。

There are probably mistakes in these diagrams, so I'll be happy to see any cases where they don't work properly.

这些图中可能存在错误，因此很高兴看到它们无法正常工作的任何情况。

Here's the list of png images and the powerpoint file I used to make them, in case you want to use (or correct) the diagrams for your own purposes.

这是png图像和我用来制作的PowerPoint文件的列表，以防您出于自己的目的使用(或更正)图表。

样式表 (Stylesheet)

A stylesheet can have an optional charset, followed by zero or more imports, then zero or more namespace definitions. I struggled a bit whether I want my parser to support namespaces, because I don't think they are widely used, nor exceptionally helpful, but webkit supports them since quite a while, so, heck, let there be namespaces, although they make everything more complex. No wonder JavaScript still doesn't have (or plans for) namespaces.

样式表可以具有可选的字符集，后跟零个或多个导入，然后零个或多个命名空间定义。我是否想让我的解析器支持名称空间有些挣扎，因为我认为它们没有被广泛使用，也没有特别的帮助，但是webkit支持它们已经有一段时间了，所以，让它们存在名称空间，尽管它们使一切更复杂。难怪JavaScript仍然没有(或计划)命名空间。

So after these intro @-rules, there could be any number or combination of rulesets, @font-face, @page, @media and @keyframes, in any order.

因此，在这些@规则介绍之后，规则集，@ font-face，@ page，@ media和@keyframes的数量或组合可以是任意顺序。

@字符集 (@charset)

Pretty simple, just the literal @charset followed by a string. It has to be the first thing in the CSS file and there can only be one.

很简单，只需要文字@charset和一个字符串即可。它必须是CSS文件中的第一件事，并且只能有一个。

E.g.

例如

@charset "UTF-8";

@进口 (@import)

Any number of imports follow the charset, they can define the URL of the imported CSS as a string or using url(). There's an optional media identifier (in CSS2) turned media query (CSS3). In other words these are all valid:

字符集后面有任意数量的导入，它们可以将导入CSS的URL定义为字符串或使用url() 。有一个可选的媒体标识符(在CSS2中)，可以转换为媒体查询(CSS3)。换句话说，这些都是有效的：

@import "stuff.css";
@import url(stuff.css);
@import url(stuff.css) print, handheld;
@import url(stuff.css) screen and (color);
@import "stuff.css" screen and (color), projection and (min-color: 256);

Ah, media query syntax, lovely.

嗯，媒体查询语法，很可爱。

@名称空间 (@namespace)

Namespaces (arrgh!) are innocent-looking to declare:

命名空间(arrgh！)看起来很无辜，可以声明：

@namespace svg "http://www.w3.org/2000/svg";
@namespace svg url(http://www.w3.org/2000/svg);
@namespace "http://example.org";
@namespace empty "";
@namespace "";

@keyframe (@keyframe)

Horray for more @-rules. This one is pretty cool actually, has been working well in WebKit (I've used it) via @-webkit-keyframe and allows us to take serious amounts of animation-related code out of JS.

希望获得更多@-规则。实际上，这很酷，它通过@-webkit-keyframe在WebKit(我已经使用过)中运行良好，并允许我们从JS中提取大量与动画相关的代码。

@keyframes 'diagonal-slide' {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 100px;
    top: 100px;
  }
}

@媒体 (@media)

We've all used stuff like @media print {.banner {display: none}} for quite a while, but things are getting complex these days with the media queries and the ability to nest @page blocks (which can have blocks of their own). Hairier and hairier.

我们都使用过@media print {.banner {display: none}}的东西已经有一段时间了，但是如今，随着媒体查询和嵌套@page块(可以包含其块的块)的能力，事情变得越来越复杂。拥有)。越来越多。

@media screen {
  margin: 20px;
}
@media print and (color), projection and (device-aspect-ratio: 16/9) {
  @page :left { 
    @bottom-left-corner {
      margin: 2cm;
    }
  }
}

媒体查询 (Media query)

Media queries can get a little scary. In their simplest form they can just be the media type. One of:

媒体查询可能会有点吓人。最简单的形式就是媒体类型。之一：

aural
braille
handheld
print
projection
screen
tty
tv
embossed
speech
all

(The fact that "all" is also optional makes me think there's a problem with this specific diagram but makes my head hurt. And nose bleed.)

(“ all”也是可选的事实使我认为此特定图表存在问题，但使我的头部受伤。鼻子流血。)

So, simple:

很简单：

@media print {...}

Or:

要么：

@media print, screen, handheld {...}

But you can be more specific, using AND and providing more details about the media type using the so-called media expressions.

但是您可以更具体一些，使用AND并使用所谓的媒体表达式提供有关媒体类型的更多详细信息。

@media handheld AND (orientation: portrait) {...}

Then you can negate the whole query with NOT and hide from old browsers with ONLY.

然后，您可以使用NOT否定整个查询，而仅使用旧浏览器进行隐藏。

In fact this is pretty popular way to style for iPhone:

实际上，这是iPhone样式的一种非常流行的方式：

@media only screen and (max-device-width: 480px) {
  #bigbanner {
    display: none;
  }
}

You can also keep adding AND expressions and be really picky about the type of device and the features it supports

您还可以继续添加AND表达式，并对设备的类型及其支持的功能保持谨慎

媒体表达(Media expression)

The media expressions (not to be confused with IE's expression() value) are wrapped in parentheses and can be:

媒体表达式(不要与IE的expression()值混淆)用括号括起来，可以是：

just the feature, e.g. (color)
只是特征，例如(color)
feature plus specific value for it, e.g. (orientation: portrait)
特征及其特定值，例如(orientation: portrait)
min or max value for a feature, e.g. (min-width: 100px). When there's min/max prefix, the value is required
功能的最小值或最大值，例如(min-width: 100px) 。当有最小/最大前缀时，该值是必需的

The feature can be one of:

该功能可以是以下之一：

width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

Those in italics don't support min- and max- prefixes

italics不支持min-和max-前缀

规则集(Ruleset)

Whew, finally something that looks normal - the old:

ew，终于有些看上去正常的东西了-旧的：

#mydiv {
  color: red
}

Of course, selectors are complicated, I'll deal with them in a later post.

当然，选择器很复杂，我将在以后的文章中介绍它们。

I've moved the property: value declarations into something I called "block" since it occurs not only in rulesets.

我将属性：值声明移到了我称为“块”的位置，因为它不仅发生在规则集中。

块 (Block)

Any number of property: value pairs (a.k.a. declarations), delimited by a ; and wrapped in curly braces.

任意数量的property: value对(也称为声明)，以;分隔并用大括号包裹。

宣言 (Declaration)

The plain old property: value pairs.

普通的旧属性：值对。

What the allowed values are, depends on the property. And what the property is, depends on the type of block. Blocks will be reused, for example in @keyframe and @font-face where for example there's a src property, which doesn't make sense in a normal #mydiv {} block.

允许的值是什么，取决于属性。属性是什么，取决于块的类型。块将被重用，例如在@keyframe和@ font-face中，例如，其中有一个src属性，这在普通的#mydiv {}块中是没有意义的。

You can see that I've decided my parser to allow !important as well as !ie. Since IE treats anything after ! as if it was !important, this is a common hack to make something important for IE only. This is the type of thing that I'd like to have that allows real-life validation. And why !ie and not just random !noodles? Well, !ie hints the intent and is more maintainable, where allowing anything including !importent (probably a mistype) is not too validaty and helpful.

您可以看到我已经决定解析器允许!important和!ie 。既然IE对待之后的任何东西！好像!important ，这是使IE变得重要的常见技巧。我想拥有的这种类型的东西可以进行真实的验证。为什么!ie不只是随机的!noodles ？好吧， !ie暗示了这个意图，并且更易于维护，在其中允许包括!import e nt (可能是错误键入)在内的任何内容都不太有效和无济于事。

@ font-face (@font-face)

The @font-face. Nothing overly exciting actually.

@ font-face。其实没有什么太令人兴奋的。

@页面和页面块 (@page and page blocks)

This one can become complex too, but heck, it allows us to style content for book publishing! In a worst case scenario it could have three levels of nested blocks.

这可能会变得很复杂，但是哎呀，它使我们可以为书籍出版设计样式！在最坏的情况下，它可能具有三个级别的嵌套块。

The thing is that inside of a normal property: value block there can be nested ruleset-like constructs (only instead of selector, there's a page margin)

关键是，在普通属性内：值块中可以存在嵌套的规则集式构造(仅代替选择器，而有页边距)

@media print {
  @page mine :left {
    margin: 1cm;
    @bottom-left-corner {
      margin: 2cm;
    }
  }
}
 
/* or something simpler */
@page {
  size: A4 landscape;
}

The page margins allowed are:

允许的页边距是：

@top-left-corner
@top-left
@top-center
@top-right
@top-right-corner
@bottom-left-corner 
@bottom-left
@bottom-center
@bottom-right
@bottom-right-corner
@left-top
@left-middle
@right-bottom
@right-top
@right-middle
@right-bottom

The pseudo page values allowed are

允许的伪页面值为