More logical properties

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 wou…


This content originally appeared on this is rachelandrew.co.uk and was authored by this is rachelandrew.co.uk

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.

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.

See the Pen 2 value logical shorthands by rachelandrew (@rachelandrew) on CodePen.

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

  • 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.

See the Pen Logical Border Radius Properties by rachelandrew (@rachelandrew) on 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.


This content originally appeared on this is rachelandrew.co.uk and was authored by this is rachelandrew.co.uk


Print Share Comment Cite Upload Translate Updates
APA

this is rachelandrew.co.uk | Sciencx (2019-02-19T10:56:00+00:00) More logical properties. Retrieved from https://www.scien.cx/2019/02/19/more-logical-properties/

MLA
" » More logical properties." this is rachelandrew.co.uk | Sciencx - Tuesday February 19, 2019, https://www.scien.cx/2019/02/19/more-logical-properties/
HARVARD
this is rachelandrew.co.uk | Sciencx Tuesday February 19, 2019 » More logical properties., viewed ,<https://www.scien.cx/2019/02/19/more-logical-properties/>
VANCOUVER
this is rachelandrew.co.uk | Sciencx - » More logical properties. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/02/19/more-logical-properties/
CHICAGO
" » More logical properties." this is rachelandrew.co.uk | Sciencx - Accessed . https://www.scien.cx/2019/02/19/more-logical-properties/
IEEE
" » More logical properties." this is rachelandrew.co.uk | Sciencx [Online]. Available: https://www.scien.cx/2019/02/19/more-logical-properties/. [Accessed: ]
rf:citation
» More logical properties | this is rachelandrew.co.uk | Sciencx | https://www.scien.cx/2019/02/19/more-logical-properties/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts