Bare Fridays # 1

Good day to all. Today we will talk about how to arrange the selected text beautifully, cope with the indentation in the buttons, pump the scroll in mobile browsers, cross the text color with the color of the borders, and also consider interesting new units of measurement.

New units

Not so long ago, a new family joined the constellation of CSS units:

• vw (viewport width) - 1 percent of the width of the browser window;
• vh (viewport height) - 1 percent of the height of the browser window;
• vmin and vmax - choose among vw or vh smaller or larger value.

About these units have already been written on Habré in 2011 bearded. Why do we write about them again? The fact is that they are already quite well supported by browsers .

What are they needed for? They greatly simplify the layout of objects that directly depend on the size of the window. No more percent from parental blocks, and God forbid, JS.
For example, you can set font sizes very conveniently:

.some-text { font-size: 100vh; line-height: 100vh; } 

')
Or put a rubber popup in the center of the page:

 .blackSquare { background: black; position: fixed; height: 50vh; width: 50vw; left: 25vw; top: 25vh; } 

Agree, looks concisely.

An interesting example of the use of new units of measurement was shared by the user DonSinDRom . Its essence is that the text almost always fills the parent unit, regardless of the width and height.

Styling selected text

Just a couple of lines of code, we can change the text selection throughout the site:

 *::selection { color: #fff; background: #000; } *::-moz-selection { /* Firefox     */ color: #fff; background: #000; } 

In addition to the color for text and background, you can also set text-shadow!

The property has good support : IE9 +, all popular desktop browsers and even the latest Android versions.

Of course, such decorations are not suitable for every site, but sometimes they look very nice and appropriate.

Indentation in the buttons Firefox

Firefox browser calculates padding in buttons using methods different from other browsers. For some reason, it adds additional internal padding.



You can fix it in this cunning way:

 button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: none; padding:0; } 

Scroll in blocks on touch devices

If you have blocks with an internal scroll on the page, besides overflow: scroll / auto , be sure to add a property to it

 -webkit-overflow-scrolling: touch; 

The fact is that mobile browsers sometimes do not work very well with the overflow property: scroll, and scroll through the whole page instead of the necessary block. And if the browser still hides the address bar, working with such blocks can turn into complete chaos. And here significantly helps -webkit-overflow-scrolling : the necessary block is scrolled much more readily. It's hard to show in the picture, just try it and feel the difference)

Color + Border = Border-Color

Not everyone knows that if an element is given a text color, it is automatically determined as the border color of this element:

 input[type="text"] { color: red; border: 1px solid; } 

This can be useful when styling fields and pseudo-references (links with dotted borders), since they often have the same text and border colors.

That's all for today. We hope you have learned something new for yourself! See you soon!