Re: [csswg-drafts] why mediaqueries? (#8472)

Hi.

I would like to help and contribute initially in this topic.

> What does the syntax using square brackets mean? I assume you want to combine layout breakpoints. 
> Though how do you imagine the style rule and property definitions to look like?

The definition `@import` CSS at-rule is used to import style rules from other valid stylesheets. An `@import` rule must be defined at the top of stylesheet, before any other at-rule (except `@charset` and `@layer`) and style declaration, else it will be ignored. The `@import` rule also supports media queries, so you can allow the import to be media-dependent

#### usage and example
```css
@import url("sample1.css") print;
@import url("sample2.css") projection, tv;
@import 'sample3.css';
@import url("chrome://communicator/skin/");
@import "sample4.css" screen, projection;
@import url('sample5.css') screen and (orientation:landscape);
```

#### demo 1: mediaqueries without breakpoints
*demo1.css*
```css
@import 'sample.css'; /* import file sample.css inside of demo1.css */
@media (width <= 600px) {
  .facet_sidebar {
    display: none;
  }
}
```

#### demo 2: breakpoint to mediaqueries with `@import`
An initial idea would be to have a property called breakpoint that works as an array type css variable to store different values related to: 'width', 'height', 'min-width', 'max-width', 'max-height ', 'min-height' - the advantage of this is that it applies to every element you reference by index.

*breakpoint.css*
```css
/*  
@breakpoint to 'width', 'height', 'min-width', 'max-width', 'max-height ', 'min-height' 
*/

@breakpoint: [500px, 300px, 200px, 600px];
```

*demo2.css*
```css
@import 'breakpoint.css'; /* import file breakpoint.css inside of demo2.css */
@media (width <= breakpoint[3]) { /* 600px */
  .facet_sidebar {
    display: none;
    max-width: breakpoint[0] /* 500px */
  }
}
```

#### demo 3:  breakpoint to mediaqueries without `@import`
```css
@breakpoint: [500px, 300px, 200px, 600px];
@media (width <= breakpoint[3]) { /* 600px */
  .facet_sidebar {
    display: none;
    max-width: breakpoint[2] /* 300px */
    }
  } 
```

#### demo 4:  custom breakpoint and custom-mediaqueries
```css
@breakpoint: [500px, 300px, 200px, 600px]{
@breakpoint.media (breakpoint.width <= breakpoint:nth-child(4n) ) { /* 600px */
  .facet_sidebar {
    display: none;
    max-width: breakpoint[2] /* 300px */
    }
  } 
}
```
*or*
```css
@breakpoint: [500px, 300px, 200px, 600px]{
@media (breakpoint.width <= breakpoint:nth-child(4n) ) { /* 600px */
  .facet_sidebar {
    display: none;
    max-width: breakpoint[2] /* 300px */
    }
  } 
}
```

*what do you all think of these ideas? it makes sense or not?*


-- 
GitHub Notification of comment by eantho
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8472#issuecomment-1442703139 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 24 February 2023 02:19:28 UTC