Css - Expanded shorthand properties - What is bord

2019-06-21 02:32发布

问题:

Introduction

When clicking on the css tab on Firebug, there is an option available called "Expand Shorthand Properties"!

A typical css rule like the following:

border-left:2px solid #7FA100;

..is converted into the "Expanded" version like so:

border-left-color-ltr-source:physical;
border-left-color-rtl-source:physical;
border-left-color-value:#7FA100;
border-left-style-ltr-source:physical;
border-left-style-rtl-source:physical;
border-left-style-value:solid;
border-left-width-ltr-source:physical;
border-left-width-rtl-source:physical;
border-left-width-value:2px;

My problem / question

I work on a project where the designer introduces style sheets that contain rules in their "expanded" nature directly.

1) Are they proper css rules?

2) Do all (or any, or which) browsers recognize these expanded rules directly?

Thanks, dS

回答1:

This is a Mozilla-internal representation of the normal border property that could be the web developer toolbar + see Dom Inspector.

Nothing of significance for CSS authors.



回答2:

  1. No, test it in jsfiddle and it wont work.
  2. Why would it matter? Do you really want to write your code like that?

I think you and the designer need to have a serious talk about writing unnecessary code that is not maintainable and probably doesn't work in half the browsers out there.