Numerous changes using media queries

Question

Numerous changes using media queries

Is there a way to have separate transitions in media queries without duplicating code?

@media screen and (min-width: 800px) {
    #div {
        transition: width 1s;
    }
}
#div {
    transition: height 1s; /* Overrides previous one :( */
}

How can I achieve this? Is there an alternative to creating multiple duplicate media queries?

@media screen and (max-width: 799px) {
    #div {
        transition: height 1s;
    }
}
@media screen and (min-width: 800px) {
    #div {
        transition: width 1s, height 1s; /* Ugly duplication :( */
    }
}

This issue extends beyond just media queries to complex selectors as well.

html css media-queries transition

Answer 1

Answer №1

If you want to achieve this, consider using LESS

https://github.com/less/less-docs/blob/master/content/features/merge.md

.mixin() {
  transition: height 1s;
}

@media screen and (max-width: 799px) {
    .mixin()
}


@media screen and (min-width: 800px) {
  .mixin();
  transition+: width 1s;
}

Answer 2

If you want to achieve this, consider using LESS

https://github.com/less/less-docs/blob/master/content/features/merge.md

.mixin() {
  transition: height 1s;
}

@media screen and (max-width: 799px) {
    .mixin()
}


@media screen and (min-width: 800px) {
  .mixin();
  transition+: width 1s;
}

Answer 3

Answer №2

The reason why the proposed solution is ineffective is due to the limitation of the transition property in CSS, which can only accept a single value at a time. It does not consider previous transitions applied to other properties like width, leading to an override when applying a new transition for height.

The use of the transition property serves as shorthand for various transition properties such as transition-property, transition-duration, transition-timing-function, and transition-delay. To target specific parts for modification, you can directly specify them:

#div {
    transition: height 1s;
}

@media screen and (min-width: 800px) {
    #div {
        transition-property: width, height;
    }
}

To avoid redundant declarations, it's essential to list both properties while avoiding repetition of duration settings.

Keep in mind the order of declaration matters. Setting the base case before overrides ensures proper application since CSS reads rules from top to bottom, giving precedence to later declarations. In cases where one property override seems persistent, reevaluate order rather than query validity.

Answer 4

The reason why the proposed solution is ineffective is due to the limitation of the transition property in CSS, which can only accept a single value at a time. It does not consider previous transitions applied to other properties like width, leading to an override when applying a new transition for height.

The use of the transition property serves as shorthand for various transition properties such as transition-property, transition-duration, transition-timing-function, and transition-delay. To target specific parts for modification, you can directly specify them:

#div {
    transition: height 1s;
}

@media screen and (min-width: 800px) {
    #div {
        transition-property: width, height;
    }
}

To avoid redundant declarations, it's essential to list both properties while avoiding repetition of duration settings.

Keep in mind the order of declaration matters. Setting the base case before overrides ensures proper application since CSS reads rules from top to bottom, giving precedence to later declarations. In cases where one property override seems persistent, reevaluate order rather than query validity.

Numerous changes using media queries

Answer №1

Answer №2

Similar questions

Creating a sticky menu in a column using affix with a CSS bootstrap list-group

The page fails to load when redirected, however, it briefly displays the page upon clicking the back button before navigating back to the previous page

I'm seeking guidance on how to delete a specific ul li element by its id after making an ajax request to delete a corresponding row in MySQL database. I'm unsure about the correct placement for the jQuery

Incorporating headers and footers on every page

hiding html elements by using the display property set to none instead of physically removing

Navigating to the end of the fixed-height table while inserting new elements

div.load() results in a complete page reload

Mosaic-inspired image gallery with HTML and CSS styling

What is the best way to combine PHP and HTML within a JavaScript script?

Change the height of textarea dynamically using jQuery

Enhancing HTML "range" element with mouse scroll functionality for incrementing values in step increments

Formatting dynamically generated HTML using C#

Background image not showing on div element

Tips for incorporating an image into the background of a mobile device

Creating CSS dynamically using PHP

Choosing custom element children once they're connected to the DOM: A guide

Guide on implementing page styles to a polymer element

Is it possible for media queries to effectively support mobile devices?

Issues with CSS styling inheritance in Angular components

Mobile device causing elements to resize unevenly