Naked Fridays # 1

  • Tutorial
bare friday

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

New units


Not so long ago, a new family joined the galaxy of units of measure CSS:
  • vw (viewport width) - 1 percent of the width of the browser window;
  • vh (viewport height) - 1 percent of the browser window height;
  • vmin and vmax - choose a smaller or larger value among vw or vh.

About these units already wrote on a hub in the bearded 2011. Why are we writing 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 percentages from parent blocks, and God forbid, JS.
For example, you can very conveniently set the font sizes:
.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, it looks concise.

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 in the parent block, regardless of width and height.

Contraindications
  • IE 9 recognizes the designation "vm" instead of "vmin";
  • iOS7 can work with “vh” with bugs;
  • Support for the "vmax" property is not yet complete to use.


Styling selected text


In just a couple of lines of code, we can change the selection of text on the entire site:
*::selection {
    color: #fff;
    background: #000;
}
*::-moz-selection {    /*Только Firefox до сих пор использует префикс*/
    color: #fff;
    background: #000;
}


In addition to color for text and background, you can also specify 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 Firefox Buttons


The Firefox browser calculates the indentation in the buttons by methods different from other browsers. For some reason, it adds extra indentation.

padding in firefox

You can fix this in a tricky 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;
}


Scrolling in blocks on touch devices


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

-webkit-overflow-scrolling: touch;

The fact is that mobile browsers sometimes do not work very well with the overflow: scroll property, and scroll through the entire page instead of the desired block. And if the address bar is still hidden in the browser, working with such blocks can completely turn into complete chaos. And here -webkit-overflow-scrolling helps significantly : the desired block will scroll much more readily. It's hard to show in the picture, just try 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-links (links with dashed borders), as their text and border colors often coincide.

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

Only registered users can participate in the survey. Please come in.

Was this collection helpful to you?

  • 52.7% Yes, I learned a lot; 713
  • 39.3% New to me were 1-2 recipes; 532
  • 7.9% I already knew all this. 107

Also popular now: