What is an example of an @media property other than screen?

One example of an @media property other than "screen" is "print". The "print" media type is used to apply styles specifically for when the document is printed. For example, you may want to hide certain elements on a webpage when it's printed, or change the font size and colors to make it more legible.

Here's an example of how you can use the "print" media type to hide an element on a webpage when it's printed:

@media print {
    .noprint {
        display: none;
    }
}

In this example, the .noprint class is used to hide elements that you don't want to be visible when the document is printed. You can then apply this class to any element on the webpage that you want to hide when the document is printed.

Another example of an @media property is "speech", which is used to apply styles that are specific to speech synthesizers, such as those used by screen readers. For example, you can use the "speech" media type to adjust the pacing and volume of the speech output to make it more understandable for users who have difficulty hearing or processing spoken language.

@media speech {
    p {
        voice-rate: 80%;
        volume: soft;
    }
}

In this example, the "voice-rate" and "volume" properties are used to adjust the pace and volume of the speech output.

There are other media types like "all", "braille", "embossed", "handheld", "projection", "screen", "tty" and "tv" which are used for different scenarios.

In summary, the @media property allows you to apply styles based on the media type and characteristics of the device or output medium being used to view the document, which gives you more control over how your content looks and behaves across different platforms and contexts.