7 CSS properties you had no idea about #25

7 CSS properties you had no idea about

Apparently there are some CSS properties out there that I had absolutely no idea about, let’s go through some interesting example:

 

Azimuth

Azimuth properties allows (or rather, allowed, since it’s deprecated now) for different audio sources to be positioned spatially fir aural presentation.

Wait. Audio source in CSS?

That’s correct, apparently you can use azimuth you can use azimuth and elevation to control where the audio comes from from when users have audio equipment that can handle it.

 

Syntax:

<angle> | [[ far-left | left-side | centre-left |centre| left | centre-right | right | right-side | far-right] || behind] | leftwards | rightwards

 

H1 {azimuth: 30deg;}

Td. a {azimuth: far-right;}                                    /* 65degs */

#13 {azimuth: behind far-right;}                       /* 122degs */

p. comment {azimuth: behind;}                         /* 179degs */

 

Bleed

What is this, twilight?

Not really, bleed is an experimental technology which specific the extent of page bleed area outside of the page box when printing a document.

Not that useful for web design. But may come in handy when your users and up printing documents on a physical paper (invoice, bill etc.)

 

Syntax:

/* keyword values */

Bleed: auto;

/* <length> values */

Bleed:8pt;

Bleed:1cm;

 

Caret-colour

This one is actually kind useful.

A caret is what very smart people call the blinking cursor when appears when you try to type something in an input (for instance, when writing article post)

Caret visible when writing article on a blog

Once you notice it’s blinking all the time you cannot use it.

Caret-colour allow web developers to control its colour.

 

Syntax:

Caret-colour: auto;

Cater-colour: transparent;

Caret-colour: #123456;

 

Example:

Magenta looks pretty neat thoughK

 

::Cue

It’s possible to add track tags to video elements on a page, which is useful when you’d like to add subtitles to your video for folks who either don’t speak language the video is recorded in very well or have some sort of hearing impediment.

If you’d like to style those caption this is where the cue pseudo element comes in. quoting MDN:

The: cue CSS pseudo-element matches web VTT cues within a selected element. This can be used to style captions and other cues in media with VTT tracks.

 

Syntax:

::cue |:: cue(<selector>)

 

::cue {

Colour: yellow;

Font-weight: bold;

}

 

Hyphens

This one is for my German friends.

If your text has extraordinary verbose word sometimes the content may end up overloading the container which looks.

A hyphens property allows you to turn this:

 

Syntax:

Hyphens: name;

Hyphens: manual;

Hyphens: auto;

 

Will-change

The most majority of CSS properties are for users, to enhance their experience on the website so everything is not black text on white background etc.

Will change is different – this property is use for the browsers.

This idea is that will-change. For instance, you can inform chrome browser that the opacity of the element will change at some point and as a result the many browsers can set up optimizations before an element is actually changed.

Bear in mind that this should be used as a last resort browsers are already doing what they can to optimize everything and by over using this property you may cause your website to actually be slower.

 

Syntax:

Will-change: auto;

Will-change: scroll-position;

Will-change: contents;

Will-change: transform;                       /*ex < customs-ident > */

Will-change: opacity;                              /*ex < customs-ident > */

Will-change: left, top;                             /*ex < animatable-feture > */

 

Flex

Oh come on, no one is able to use flex in a meaningful way without opening this (excellent, by the way CSS Tricks article.

 

 

 

 “Are there any interesting, unique properties I’ve missed? “