- From: Laj Krs <lajkrs@yahoo.com>
- Date: Tue, 6 Aug 2024 00:18:54 +0000 (UTC)
- To: "www-style@w3.org" <www-style@w3.org>
- Message-ID: <453936522.3416599.1722903534970@mail.yahoo.com>
Hello CSS Working Group, I am a web developer with a keen interest in CSS. I would like to propose a new feature for the CSS specification. **Feature Description:**I propose adding a new rule called "as", which can tell one element to ignore its styles and copy styles from another element.Example command where .my-form-field would copy all styles from .some-other-form-field element: .my-form-field as .some-other-form-field; 1. All .my-form-field styles are ignored 2. .my-form-field is basically styled as a clone of .some-other-form-fieldThis would allow developers to quickly style a specific element (any element) without the need to dig through the styles of the targeted element (any element). **Rationale:** It's basically inheritance but a "clean" one, a "specified" one. It would effectively turn OFF styling of one element and treat it as the targeted one. I have lost months on this exact problem on many projects in the past 15+ years. **Use Cases:**1. Immensely speeding-up the styling of improperly styled elements. 2. Quickly adapting style of 3rd party code's elements within complex frameworks, where stylesheets are deeply nested and a major pain to work with.3. Speeding up the workflow in time critical projects.4. Removing the uncertainty factor from clashing styles. **Expanding options**Having a "full style copy" would be tremendous but a choice of properties to copy would be even more powerful, in this case we could 1. Copy all styles (default) or 2. Specify what to copy, with the following syntax:.my-form as .some-form { all; /* default behavior, copies all styles. same as .my-form as .some-form; - without the curly braces */}.my-form as .some-form { padding, border-color, font-family;} **Syntax option 2** The feature could also be written as a declarations, for example:.my-form { as: .some-form;}In this case, to be able to specify which properties to copy, we'd need a total of three properties within the "as" functionality, one for shorthand and additional two for longhand, like so:/* shorthand of copying specific properties */.my-form { as: .some-form, padding border-color font-family; /* meaning: copy the styles from .some-form and after the comma we list the properties to copy */}/* longhand of copying specific properties */.my-form { as-target: .some-form; /* as-targets lets us target an element by selector */ as-properties: padding border-color font-family; /* as-properties lets us list the properties from which to copy styles */} Thank you for considering this feature request. I look forward to your feedback and discussion. Best regards, D
Received on Tuesday, 6 August 2024 05:16:13 UTC