gss1_GSS简介：网格样式表

小鱼儿 2022-12-03 11:23 71阅读 0赞

gss1

You may have recently heard of [Grid Style Sheets][] (GSS) in the world of HTML and CSS. GSS re-imagines CSS layout and replaces the browser’s layout engine with one that harnesses the *Cassowary Constraint Solver*. Those of you who didn’t understand a word of that…hello, and welcome!

您可能最近在HTML和CSS领域听说过[网格样式表][Grid Style Sheets] (GSS)。 GSS重新设计了CSS布局，并用利用*Cassowary Constraint Solver*的布局引擎替换了浏览器的布局引擎。 你们当中那些谁也不懂的话……欢迎大家！

GSS promises a better future. GSS promises relative positioning and sizing. GSS promises to center any element inside another with one line of code. And GSS delivers. The question is: How?

GSS有望拥有更美好的未来。 GSS承诺相对定位和规模调整。 GSS承诺使用一行代码将任何元素居中放置在另一个元素内。 而GSS可以提供。 问题是：如何？

In this article, I’ll cover a brief history of GSS and an in-depth overview of the features it has to offer. I’ll also look at GSS for constraint-based layouts, the Cassowary constraint algorithm, and walk you through the process of installing and using GSS.

在本文中，我将简要介绍GSS的历史以及对它所提供功能的深入概述。 我还将介绍基于约束的布局的GSS，Cassowary约束算法，并引导您完成安装和使用GSS的过程。

Those of you who’d rather not wait around for the W3C or browsers to catch up, I urge you to hang in there and pay close attention while I explain the mystery that is GSS. On that note, let’s start with a little history.

那些不想等W3C或浏览器赶上来的人，我敦促您挂在那儿，并在我解释GSS之谜的同时密切注意。 关于这一点，让我们从一些历史开始。

## 一个简短的历史 **(**A Brief History**)** ##

GSS is a creation of [The Grid][] with Dan Tocchini as its founder and CEO. This answers why the not-so-grid-based style sheets are called Grid Style Sheets.

GSS是由Dan Tocchini作为创始人和首席执行官的[The Grid][]的创建。 这回答了为什么不基于网格的样式表称为“网格样式表”的原因。

The war between web developers and front-end technology to present ideas onto the web has been going on for years. CSS has proved to be triumphant for the past decade. However, building increasingly complex user interfaces with tools that haven’t evolved with time is something web developers are expected to do on a regular basis. For example, vertically centering an element with CSS has not been the simplest of tasks, especially with variable-height elements.

Web开发人员和前端技术将思想呈现到Web上的战争已经持续了多年。 在过去的十年中，CSS被证明是胜利的。 但是，期望Web开发人员定期使用尚未随时间演变的工具来构建日益复杂的用户界面。 例如，使用CSS将元素垂直居中并不是最简单的任务，尤其是可变高度元素。

Flexbox is one of the most recent solutions, but even small changes there require you to go deep within your HTML content and CSS presentation and make changes.

Flexbox是最新的解决方案之一，但是即使进行很小的更改，也需要深入了解HTML内容和CSS表示并进行更改。

> It’s time for GSS to take the arena. GSS tackles these problems and many more — problems that developers have had for over a decade.
> 
> 现在是GSS登上舞台的时候了。 GSS解决了这些问题以及更多其他问题，这些问题是开发人员十年来遇到的问题。

Essentially, GSS is a CSS preprocessor and JavaScript runtime that exploits Cassowary.js. Those of you who don’t already know, Cassowary.js is the JavaScript port Apple uses in [Cocoa Autolayout][].

本质上，GSS是利用Cassowary.jsCSS预处理器和JavaScript运行时。 你们当中还不知道的人，Cassowary.js是Apple在[Cocoa Autolayout中][Cocoa Autolayout]使用JavaScript端口。

Both GSS and Cassowary are founded on constraint programming, making it ideal for empowering declarative languages like CSS. Constraint programming is a paradigm by which web developers are concerned with declaring the “what” and leaving the “how” up to a mathematical solver.

GSS和Cassowary都是基于约束编程的，因此非常适合于启用声明性语言(如CSS)。 约束编程是网络开发人员关注于声明“什么”并将“如何”交给数学求解器的一种范例。

> Constraint programming focuses on intentions, not implementation.
> 
> 约束编程着重于意图，而不是实现。

Now that we’ve established some background information, let’s move on to the features GSS offers.

现在我们已经建立了一些背景信息，让我们继续研究GSS提供的功能。

## GSS概述 **(**Overview of GSS**)** ##

One of the biggest problems with CSS is relativity. You can expect any CSS element to have an unending list of properties — padding, height, width, float, margins, borders, outlines — but none of this information tells us where the element will be located with reference to other elements on the page (or even the page as a whole). The endless list also doesn’t answer where the element will be displayed with different screen sizes.

CSS的最大问题之一是相对性。 您可以期望任何CSS元素都有一个无休止的属性列表-填充，高度，宽度，浮点数，边距，边框，轮廓线-但这些信息都不能告诉我们该元素在页面上的其他位置(甚至整个页面)。 无休止的列表也无法回答元素将以不同的屏幕大小显示的位置。

This brings us to the first Feature of GSS: **You define what you want the layout to be**. Gone are the days of spending countless hours of trial-and-error, strategizing how the layout should be constructed.

这使我们进入了GSS的第一个功能： **您定义想要的布局** 。 花费无数小时的反复试验，规划布局的策略的日子已经一去不复返了。

Since we already discussed that GSS utilizes Cassowary.js, here is another great feature of GSS: **An element can be centered within any other with one line of code**. This makes a lot of workarounds unnecessary and things of the past.

既然我们已经讨论过GSS利用Cassowary.js，那么这是GSS的另一个重要功能： **元素可以用一行代码位于任何其他元素的中心** 。 这使得许多变通办法变得不必要，并且已经成为过去。

For instance, if you want to add a Subscribe button in line vertically with, say, a heading on the right side of your site’s page, you would use the following code:

例如，如果您要添加一个与网站页面右侧的标题垂直排列的“订阅”按钮，则可以使用以下代码：

.subscribe-button[right] == ::window[width];
    .subscribe-button[center-y] == .header[center-y];

Another feature: **GSS makes floats, table cells, clearfix, and horizontal/vertical centering obsolete.** Bid farewell to the perilous pitfall that is a float because we’ve got the W3C itself saying that floats are not ideal for application layouts.

另一个功能： **GSS使浮标，表格单元格，clearfix和水平/垂直居中已过时。** 告别是浮动对象的危险陷阱，因为我们有W3C本身说浮动对象不是应用程序布局的理想选择。

> “As websites evolved from simple documents into complex, interactive applications, tools for document layout, e.g. floats, were not necessarily well suited for application layout.” – [W3C Grid Layout Module (working draft)][W3C Grid Layout Module _working draft]
> 
> “随着网站从简单的文档发展为复杂的交互式应用程序，用于文档布局的工具(例如浮动广告)不一定非常适合于应用程序布局。” – [W3C网格布局模块(工作草案)][W3C Grid Layout Module _working draft]

What about CSS features like `!important`? The fourth feature of GSS does something similar: **GSS employs constraint hierarchy to prioritize constraints with strengths**. We’re talking about four built-in strength levels here:

像`!important`这样CSS功能呢？ GSS的第四个功能具有类似的功能： **GSS采用约束层次结构优先考虑具有优势的约束** 。 我们在这里谈论四个内置强度级别：

*  `!weak`
    
    `!weak`
 *  `!medium`
    
    `!medium`
 *  `!strong`
    
    `!strong`
 *  `!require`
    
    `!require`

Note that `!require` is a *special* strength that ensures that the constraint will hold and if it doesn’t then everything breaks. It is advisable to use it carefully and infrequently.

请注意， `!require`是一种*特殊的*强度，它可以确保约束成立，如果不成立，那么一切都会中断。 最好不要经常使用它。

The level of strength increases down the list and stronger constraints are given higher priority during execution. Let’s look at an example:

强度级别从列表中增加，并且在执行过程中，更严格的约束被赋予更高的优先级。 让我们看一个例子：

#light[years] == 50 !weak;
    #light[years] == 20 !medium;
    #light[years] == 35 !strong;
    
    /* #light[years] will hold the value 35 */

You’ve made it this far, let’s look at some constraint-based layouts now.

到此为止，您现在来看一些基于约束的布局。

## GSS用于基于约束的布局 **(**GSS for Constraint-Based Layouts**)** ##

Constraints are basically relationships between two or more variables that may or may not hold. All numeric properties of elements qualify to be constrained. Here’s an example:

约束基本上是两个或多个可能存在或可能不存在的变量之间的关系。 元素的所有数值属性均符合约束条件。 这是一个例子：

p[line-height] >= 10;
    p[line-height] <= ::window[height] / 20;

*  `p` is called a `selector`
    
    `p`称为`selector`
 *  `line-height` is the property that GSS will compute a value for
    
    `line-height`是GSS将为其计算值的属性
 *  `[]` is used to access the property
    
    `[]`用于访问属性
 *  `<=` and `>=` define inequality constraints
    
    `<=`和`>=`定义不平等约束
 *  `10` and `20` are numerical values in pixels
    
    `10`和`20`是以像素为单位的数值

In the example given above, both constraints hold valid. Here’s an example of constraints which do not hold.

在上面给出的示例中，两个约束均成立。 这是一个不成立的约束示例。

#elementa[height] == 150;
    #elementb[height] == 150;
    #elementa[height] + #elementb[height] == 225;

Initially, both elements `elementa` and `elementb` are constrained to have a height of 150px. In the third line, the sum of the two elements is 225px. Therefore, one of the two element’s constraint’s will not hold.

最初，两个元素`elementa`和`elementb`被限制为具有150px的高度。 在第三行中，两个元素的总和为225px。 因此，两个元素的约束之一将不成立。

## GSS中的选择器 **(**Selectors in GSS**)** ##

`Selectors` in GSS are queries over a group of HTML elements and they are used to determine the elements that will ultimately be affected by the constraint. `Selectors` are important because you have to select and observe elements from the DOM before you apply constraints to them.

GSS中的`Selectors`是对一组HTML元素的查询，它们用于确定最终将受到约束影响的元素。 `Selectors`很重要，因为在将约束应用于它们之前，您必须选择并观察DOM中的元素。

The following fundamental `selectors` are supported by GSS.

GSS支持以下基本`selectors` 。

#elementID[height] == 150;   /* id      */
    div[height] == 150;         /* element */
    .className[height] == 150; /* class   */

## GSS中的规则集 **(**Rulesets in GSS**)** ##

Rulesets will let you define multiple constraints over a single selector. You can nest them and use CSS properties in them too.

规则集可让您在单个选择器上定义多个约束。 您可以嵌套它们，也可以在其中使用CSS属性。

This nested ruleset:

此嵌套规则集：

section < article {
      .aclass {
        height: == 150;
      }
    }

Is the same as:

是相同的：

(section < article .aclass)[height] == 150;

## GSS中的属性 **(**Properties in GSS**)** ##

I’ve already covered properties in the examples above but let’s look at them a little more closely. In GSS, properties are the variables that belong to an element. When we use properties that are known by CSS, their corresponding GSS-calculated value is assigned as inline styles on the element.

我已经在上面的示例中介绍了属性，但让我们更仔细地看一下它们。 在GSS中，属性是属于元素的变量。 当我们使用CSS已知的属性时，它们相应的GSS计算值将作为内联样式分配给元素。

Something like this:

像这样：

.container {
      height: == #elm[height];
    }

Would be equal to:

将等于：

.container {
      &[height] == #elm[height];
    }

## 食性约束算法简介 **(**An Introduction to the Cassowary Constraint Algorithm**)** ##

GSS employs a JavaScript port (Cassowary.js) of the [Cassowary Linear Arithmetic Constraint Solving Algorithm][] by Badros, Borning and Stuckey, 1999. The algorithm finds optimal solutions for layouts based on input constraints given in natural language by the user.

GSS采用了Badros，Borning和Stuckey，1999年的[Cassowary线性算术约束求解算法][Cassowary Linear Arithmetic Constraint Solving Algorithm]JavaScript端口(Cassowary.js)。该算法根据用户以自然语言给出的输入约束，为布局找到最佳解决方案。

The user is not required to ensure that the input constraints do not contradict with one another. In fact, this is the essence of the Cassowary algorithm; it incrementally evaluates the constraints and discovers an optimal solution automatically.

不需要用户确保输入约束不相互矛盾。 实际上，这就是Cassowary算法的本质。 它会逐步评估约束条件并自动发现最佳解决方案。

### 食性算法的计算局限性 **(**Computational Limitations of the Cassowary Algorithm**)** ###

The constraints solver behind GSS is called the Cassowary algorithm. This algorithm can only compute constraints that are linear (i.e. of the form `y = mx + c`). The basic operators ( +, -, \*, /) are supported by the algorithm. Multiplication and division of two (or more) constrained variables is not linear and will, therefore, throw an error.

GSS背后的约束求解器称为Cassowary算法。 该算法只能计算线性约束(即`y = mx + c`的形式)。 该算法支持基本运算符(+，-，\*，/)。 两个(或多个)约束变量的乘法和除法不是线性的，因此将引发错误。

/* this expression is not linear */
    #elementa[height] * #elementb[width] == newElement;

## 安装GSS **(**Installing GSS**)** ##

For client-side installation, install via Bower:

对于客户端安装，请通过Bower安装：

$ bower install gss

Then add this code to your markup’s `<head>` section:

然后将此代码添加到标记的`<head>`部分：

You can also download version 2.0.0 [via GitHub as a zip file][].

您还可以[通过GitHub][via GitHub as a zip file]下载2.0.0版[的zip文件][via GitHub as a zip file] 。

Once you’ve installed GSS, load your .gss stylesheets by adding `type=text/gss` on a `<link>` tag:

安装GSS后，通过在`<link>`标记上添加`type=text/gss`来加载.gss样式表：

Or using a `<style>` element:

或使用`<style>`元素：

Once you have everything up and running, you can start following along with some code examples. Below I’ll go over a beginner’s tutorial.

一旦一切就绪并开始运行，您就可以开始跟随一些代码示例。 下面，我将介绍一个初学者的教程。

## GSS入门教程 **(**A GSS Beginner’s Tutorial**)** ##

The examples I’ll be creating will be displayed via CodePen but I’ll go through the tutorial like a standard HTML document. First I’ll add the following line of code to my HTML to add the GSS engine script:

我将创建的示例将通过CodePen进行显示，但我将像标准HTML文档一样浏览本教程。 首先，我将以下代码行添加到HTML中以添加GSS引擎脚本：

<script src="gss.js"></script>

I’ll be using a CodePen-hosted version of the file, but you can find [a CDN-hosted version here][]. Next I’ll add the following code under the GSS reference script (the line I just added above) to pass GSS the `document` object.

我将使用该文件的CodePen托管版本，但是您可以[在此处][a CDN-hosted version here]找到[CDN托管版本][a CDN-hosted version here] 。 接下来，我将在GSS参考脚本(我刚刚在上面添加的行)下添加以下代码，以将GSS传递给`document`对象。

<script type="text/javascript">
      window.engine = new GSS(document);
    </script>

If you prefer, this could be placed in a separate JavaScript file that gets included after the engine script.

如果愿意，可以将其放置在引擎脚本之后包含的单独JavaScript文件中。

## 示例1：元素垂直居中 **(**Example 1: Vertically Centering an Element**)** ##

I’ll create a `div` and enclose some text in `h2` tags in the GSS layout and add this to the HTML:

我将创建一个`div`并将一些文本包含在GSS布局的`h2`标签中，并将其添加到HTML中：

<div class="foo">
      <h2>When in doubt, use GSS.</h2>
    </div>

After adding some basic styling, I can get into adding some GSS to create the layout. This is where the fun starts.

添加一些基本样式后，我可以添加一些GSS来创建布局。 这就是乐趣的开始。

My goal is to vertically center the .foo element inside the viewport, despite its size, and be able to keep the same alignment in place even if the size of the element changes.

我的目标是不管.foo元素的大小如何，都将其垂直放置在视口内部居中，即使该元素的大小发生变化，也能够保持相同的对齐方式。

Here are the constraints that I will apply to achieve this goal:

这是我将要实现此目标的约束：

*  Use the `::window` selector to center the element with the visible part of the page in the browser.
    
    使用`::window`选择器将元素与浏览器中页面的可见部分居中。
 *  Use `::[intrinsic-height]` attribute to get a relative value of the `height` of the element which will be used to determine the relative `width`.
    
    使用`::[intrinsic-height]`属性获取元素`height`的相对值，该值将用于确定相对`width` 。

First, I’ll add a `<style>` block to the HTML with the `type` attribute set to `text/gss`:

首先，我将在`type`属性设置为`text/gss`HTML中添加一个`<style>`块：

A `<style>` block is necessary to define the GSS I’m going to add. I’m going to position the element in the center of the screen by adding the following code inside the `<style>` tags:

`<style>`块对于定义我要添加的GSS是必需的。 通过在`<style>`标签内添加以下代码，我将元素定位在屏幕的中央：

And that’s all that’s needed. The element is now centered (with dynamic height) vertically using GSS. Below is the demo:

这就是所需要的。 现在，使用GSS将元素垂直居中(具有动态高度)。 以下是演示：

See the Pen [Vertical Centering with GSS][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [使用GSS][Vertical Centering with GSS]进行笔[垂直居中][Vertical Centering with GSS] 。

Try [the full screen demo][] and try resizing the browser vertically to see the element stay centered at any window size.

尝试[全屏演示，][the full screen demo]然后尝试垂直调整浏览器的大小，以查看元素在任何窗口大小处的居中位置。

## 示例2：基于动态变化的窗口宽度的元素旋转 **(**Example 2: Element Rotation Based on Dynamically Changing Window Width**)** ##

For this next example, I’ll create a simple colored square shape and have it rotate dynamically. First let’s boot GSS by adding the following lines of code in the `<head>` section of the document:

在下一个示例中，我将创建一个简单的彩色正方形并使其动态旋转。 首先，通过在文档的`<head>`部分中添加以下代码行来引导GSS：

Note that you would have to edit the code above to point to the correct location for the files. You can get [the worker.js file here][], and the [gss.js file here][].

请注意，您将必须编辑上面的代码以指向文件的正确位置。 您可以[在此处][the worker.js file here]获取[worker.js文件][the worker.js file here] ，并在[此处][the worker.js file here]获取[gss.js文件][gss.js file here] 。

*Note: Due to some bugs, the above file paths point to pre-2.0.0 versions of GSS to get this to work.*

*注意：由于某些错误，以上文件路径指向GSS 2.0.0之前的版本才能使其正常工作。*

Now let’s create the square shape by adding this to the HTML:

现在，通过将其添加到HTML中来创建正方形：

…and add some styling to it in the CSS:

…并在CSS中添加一些样式：

.square {
      background: rgb(255, 0, 0);
    }

Now I’ll go back to the HTML and add some GSS constraints.

现在，我将回到HTML并添加一些GSS约束。

Keep in mind that with GSS, you simply make an intention and leave the mathematical computation up to the algorithm. In this example, I’m trying to create a constraint between the element and the window by which a rotation is produced in the element when the width of the window changes dynamically.

请记住，使用GSS时，您仅需做出意图，然后将数学计算留给算法。 在此示例中，我试图在元素和窗口之间创建约束，当窗口的宽度动态变化时，通过该约束在元素中产生旋转。

Here are the constraints that I will apply to achieve this goal:

这是我将要实现此目标的约束：

*  Use the `::window[center]` selector to center the element inisde the visible part of the page in the browser.
    
    使用`::window[center]`选择器将元素居中，使其位于浏览器中页面的可见部分。
 *  Use `::window[width]` to create a constraint with `rotate-z`, which will create the rotational effect on the element around its z-axis. Here, the value received from `::window[width]` represents the degree of rotation.
    
    使用`::window[width]`创建带有rotation `rotate-z`的约束，这将在元素上绕其z轴创建旋转效果。 在这里，从`::window[width]`接收的值表示旋转度。

I’ll add a style block to the HTML with a `type` set to `text/gss`, like I did in the first example. Remember that a `style` block is necessary to define the GSS I’m going to add.

我将在HTML中添加一个样式块，并将其`type`设置为`text/gss` ，就像在第一个示例中所做的那样。 请记住，定义我要添加的GSS必需使用`style`块。

I’m going to associate the square box with the screen using GSS constrains by adding the following code inside the `style` tags:

我将通过在`style`标签内添加以下代码，使用GSS约束将方形框与屏幕相关联：

And with that, it’s done. Check out the final CodePen demo:

这样就完成了。 查看最终的CodePen演示：

See the Pen [Dynamic Rotation using GSS][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] ) [使用GSS][Dynamic Rotation using GSS]进行的笔[动态旋转][Dynamic Rotation using GSS] 。

If you view the [full screen demo][], try resizing the window. You’ll notice that the square box will change its rotation position when the width of the window is altered.

如果您查看[全屏演示][full screen demo] ，请尝试调整窗口大小。 您会注意到，当改变窗口的宽度时，方框将改变其旋转位置。

## GSS的未来 **(**The Future of GSS**)** ##

The future of [GSS][] looks promising. It’s time we moved forward with front-end technology. I suggest that you practice on smaller scale prototypes before you rip apart your entire stylesheet library.

[GSS][]的未来看起来很有希望。 是时候让我们向前发展前端技术了。 我建议您先拆解较小规模的原型，然后再拆分整个样式表库。

What I’ve covered here is only a small sample of what you can do with GSS, but I hope that you found this tutorial helpful and informative to get you started.

我在这里仅介绍了GSS可以使用的功能的一小部分，但我希望您对本教程有所帮助，并从中学到知识。

Have you used GSS yet? How was your experience? Let me know in the comments section.

您使用过GSS吗？ 您的经历如何？ 让我知道在评论部分。

> 翻译自: [https://www.sitepoint.com/introducing-gss-grid-style-sheets/][https_www.sitepoint.com_introducing-gss-grid-style-sheets]

gss1

[Grid Style Sheets]: http://gridstylesheets.org/
[The Grid]: https://thegrid.io/
[Cocoa Autolayout]: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage.html
[W3C Grid Layout Module _working draft]: https://www.w3.org/TR/css-grid-1/#background
[Cassowary Linear Arithmetic Constraint Solving Algorithm]: https://constraints.cs.washington.edu/solvers/cassowary-tochi.pdf
[via GitHub as a zip file]: https://github.com/gss/engine/archive/v2.0.0.zip
[a CDN-hosted version here]: https://s3-us-west-2.amazonaws.com/cdn.thegrid.io/gss/v2.0.0/v2.0.0/gss.js
[Vertical Centering with GSS]: http://codepen.io/SitePoint/pen/xwLPdW/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[the full screen demo]: http://codepen.io/rafaysaeedansari/full/qOmpoa
[the worker.js file here]: http://rawgit.com/the-gss/engine/36a663b403373ea36ea60a2ff966d987e3512fa3/dist/worker.js
[gss.js file here]: http://rawgit.com/the-gss/engine/36a663b403373ea36ea60a2ff966d987e3512fa3/dist/gss.js
[Dynamic Rotation using GSS]: http://codepen.io/SitePoint/pen/rOzYpY/
[full screen demo]: http://codepen.io/rafaysaeedansari/pen/avWEvo
[GSS]: https://gridstylesheets.org/
[https_www.sitepoint.com_introducing-gss-grid-style-sheets]: https://www.sitepoint.com/introducing-gss-grid-style-sheets/