Syntax¶

Description: type is defined as a query utility that defines specific query type conditions.

ctr('<#selector>', {
  media: {
    query: {
      type: {
        media: '<media>'
        condition: '<only>' | '<not>'
      }
    }
    <...>: <...>
  }
})

<#selector>:
  media:
    query:
      type:
        media: <media>
        condition: <only> | <not>
    <...>: <...>

@media <type:condition> <type:media> {
  <#selector> {
    <...>: <...>;
  }
}

Notes

• MDN Media types

Media¶

Description: A value for the media property defines a specific target media type.

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: {
        media: 'screen'
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      type:
        media: screen
    background: red

.test {
  width: 200px;
}
@media only screen {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: {
        media: 'screen'
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media only screen {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      type:
        media: screen
    background: red

Notes

• Equivalent to type: 'screen'
• Condition: If the media type is a screen, then the background of .test is red
• Types: all print screen speech
  • Note, tty, tv, projection, handheld, braille, embossed, aural have been deprecated

Condition¶

Description: The logical operator values of 'not' or 'only' for the condition property specify a condition for the target media type.

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: {
        media: 'screen'
        condition: 'not'
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      type:
        media: screen
        condition: not
    background: red

.test {
  width: 200px;
}
@media not screen {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: {
        media: 'screen'
        condition: 'not'
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media not screen {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      type:
        media: screen
        condition: not
    background: red

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: {
        media: 'screen'
        condition: 'only'
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      type:
        media: screen
        condition: only
    background: red

.test {
  width: 200px;
}
@media only screen {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: {
        media: 'screen'
        condition: 'only'
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media only screen {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      type:
        media: screen
        condition: only
    background: red

Notes

• You must specify a media value for the condition to target
• Condition: If the media type is <not | only> a screen, then the background of .test is red

Query¶

Description: Key-value query conditions can be defined alongside the type Object.

ctr('.test', {
  width: 200px
  media: {
    query: {
      max-width: 300px
      type: {
        media: 'screen'
        condition: 'not'
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      max-width: 300px
      type:
        media: screen
        condition: not
    background: red

.test {
  width: 200px;
}
@media not screen and (max-width: 300px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      max-width: 300px
      type: {
        media: 'screen'
        condition: 'not'
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media not screen and (max-width: 300px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      max-width: 300px
      type:
        media: screen
        condition: not
    background: red

Notes

• Condition: If the media type is not a screen and the window width is less than 300px, then the background of .test is red

Multiple¶

Description: A List value for the media property targets multiple media types.

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: {
        media: 'screen' 'print'
        condition: 'only'
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      type:
        media: [screen, print]
        condition: only
    background: red

.test {
  width: 200px;
}
@media only screen, print {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      type: {
        media: 'screen' 'print'
        condition: 'only'
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media only screen, print {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      type:
        media: [screen, print]
        condition: only
    background: red

Notes

• Condition: If the media type is only a screen or print, then the background of .test is red

And Condition¶

Description: The type Object can be used in an andCondition.

ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        min-width: 200px
        min-height: 200px
        type: {
          media: 'screen'
          condition: 'not'
        }
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      andCondition:
        min-width: 200px
        min-height: 200px
        type:
          media: screen
          condition: not
    background: red

.test {
  width: 200px;
}
@media not screen and (min-width: 200px) and (min-height: 200px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        min-width: 200px
        min-height: 200px
        type: {
          media: 'screen'
          condition: 'not'
        }
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media not screen and (min-width: 200px) and (min-height: 200px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      andCondition:
        min-width: 200px
        min-height: 200px
        type:
          media: screen
          condition: not
    background: red

Notes

• You can specify the type Object inside or outside of an andCondition
• Condition: If the media type is not a screen and the window width and height is greater than 200px, then the background of .test is red

Or Condition¶

Description: The type Object can be used in an orCondition.

ctr('.test', {
  width: 200px
  media: {
    query: {
      orCondition: {
        min-width: 200px
        min-height: 200px
        type: {
          media: 'screen'
          condition: 'only'
        }
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      orCondition:
        min-width: 200px
        min-height: 200px
        type:
          media: screen
          condition: only
    background: red

.test {
  width: 200px;
}
@media only screen, (min-width: 200px), (min-height: 200px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      orCondition: {
        min-width: 200px
        min-height: 200px
        type: {
          media: 'screen'
          condition: 'only'
        }
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media only screen, (min-width: 200px), (min-height: 200px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      orCondition:
        min-width: 200px
        min-height: 200px
        type:
          media: screen
          condition: only
    background: red

Notes

• You can specify the type Object inside or outside of an orCondition
• Condition: If the media type is a screen or the window width or height is greater than 200px, then the background of .test is red

And with Or Condition¶

Description: The type Object can be used with both andCondition and orCondition.

ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        min-width: 200px
        min-height: 200px
      }
      orCondition: {
        max-width: 800px
        max-height: 800px
      }
      type: {
        media: 'screen'
        condition: 'not'
      }
    }
    background: red
  }
})

.test:
  width: 200px
  media:
    query:
      andCondition:
        min-width: 200px
        min-height: 200px
      orCondition:
        max-width: 800px
        max-height: 800px
      type:
        media: screen
        condition: not
    background: red

.test {
  width: 200px;
}
@media not screen and (min-width: 200px) and (min-height: 200px) and (max-width: 800px), (max-height: 800px) {
  .test {
    background: #f00;
  }
}

ctr('.test', {
  width: 200px
  media: {
    query: {
      andCondition: {
        min-width: 200px
        min-height: 200px
      }
      orCondition: {
        max-width: 800px
        max-height: 800px
      }
      type: {
        media: 'screen'
        condition: 'not'
      }
    }
    background: red
  }
})

.test {
  width: 200px;
}
@media not screen and (min-width: 200px) and (min-height: 200px) and (max-width: 800px), (max-height: 800px) {
  .test {
    background: #f00;
  }
}

.test:
  width: 200px
  media:
    query:
      andCondition:
        min-width: 200px
        min-height: 200px
      orCondition:
        max-width: 800px
        max-height: 800px
      type:
        media: screen
        condition: not
    background: red

Notes

• You must specify the type Object outside of the andCondition and orCondition
• Condition: If the media type is not a screen and the window width and height is greater than 200px and the window width or height is less than 800px, then the background of .test is red