cas 5 更多属性_更多逻辑属性

cas 5 更多属性

Last year I published a post on Smashing Magazine introducing Logical Properties and Values, flow-relative mappings for the physical properties and values we use on the web. For example, instead of width you might use inline-size, and the dimension would then be correct whether you were in a horizontal or vertical writing mode. Take a look at the article Understanding Logical Properties and Values for more detail. You could also have a look at some of the work I have been doing over at MDN to document and create guides for using Logical Properties and Values.

去年，我在Smashing Magazine上发表了一篇文章，介绍了逻辑属性和值，我们在网络上使用的物理属性和值的流相关映射。 例如，可以使用inline-size而不是width ，然后无论您处于水平书写模式还是垂直书写模式，尺寸都将是正确的。 有关更多详细信息，请参阅文章“ 了解逻辑属性和值 ”。 您也可以看看我在MDN所做的一些工作，以记录和创建使用逻辑属性和值的指南。

SInce I wrote the Smashing Magazine article browser support for these features has improved, with the majority of basic mappings supported by Firefox and Chrome. Also in the specification are some new shorthands. Using logical values means we get a property which sets both block or both inline values at once, for example margin-block or padding-inline. Both Chrome (behind a flag) and Firefox (in Nightly) have implementations of these, which you could see in the below CodePen if using one of those browsers.

自从我撰写《 Smashing Magazine》文章以来，浏览器对这些功能的支持已得到改进，而Firefox和Chrome支持大多数基本映射。 规范中还有一些新的缩写。 使用逻辑值意味着我们将获得一个属性，该属性可一次设置两个block值或两个inline值，例如margin-block或padding-inline 。 Chrome（在标志后面）和Firefox（在Nightly中）都具有这些实现，如果使用其中一种浏览器，则可以在下面的CodePen中看到它们。

演示地址

Also, in Firefox Nightly, are the longhands for logical border-radius properties:

此外，在Firefox Nightly中，逻辑边界半径属性的缩写是：

• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

If you have Firefox Nightly, take a look at this CodePen.

如果您有Firefox Nightly，请查看此CodePen。

演示地址

These properties and values are helpful if you are developing sites for multiple writing modes but should also be useful if you are using writing modes creatively. It’s nice to see the browser implementations adding more support for the spec.

如果要为多种书写模式开发站点，则这些属性和值将很有用，但如果您创造性地使用书写模式，这些属性和值也将很有用。 很高兴看到浏览器实现为规范添加了更多支持。

翻译自: https://rachelandrew.co.uk/archives/2019/02/19/more-logical-properties/

cas 5 更多属性