Several useful CSS tricks

While working on the last project, there were several interesting CSS tricks I’m going to talk about. Although, perhaps, this has already been invented before us and everyone already knows about it. The examples use LESS, not pure CSS.

Auto substitution event in input field

Problem : find out that the user has used the auto-substitution feature. The task was to highlight the Login button if something was entered in the e-mail and password fields. The problem is that if these fields are populated with an automatic substitution from the browser's key card, then the change event on the inputs does not fire.



Solution : use pseudo-class: valid. It works for an input if it has content that satisfies the input type (text, e-mail) and if this input has the required attribute. True, the solution does not work in IE, but we do not need support for this browser.

')

<input required="required" class="email-input" type="email" /> <input required="required" class="password-input" type="password"/> <div class="go">Login</div> .email-input:valid ~ .password-input:valid ~ .go { //    Login } 

: hover in mobile devices

Problem : disable browser response in mobile device to pseudo-class: hover in CSS (in case we have one common style file for mobile and desktop versions). Because mobile browsers do not always react to this pseudo-class the way the developer needs: sometimes they block the click handler on the element (it works the second time) or leave the element in the hover state (until you click on another element).



Solution : since we use Modernizr and LESS, we have out of the box touch and no-touch classes. Therefore, when describing hovers, we simply write to use the hover only for versions with a mouse, and for versions with that use: active (if necessary):

 .element { //  .no-touch &:hover, .touch &:active { //        } } 

Hiding placeholder when getting focus on input

Problem : the standard behavior of browsers (not all, but many) provides for hiding the placeholder as soon as at least one character is entered in the field. We wanted the placeholder to be hiding immediately upon entering the input. And it was necessary to do this without using JS.



Solution : use the pseudo-class: placeholder with the pseudo-class: focus to make the text of the placeholder text invisible when receiving focus. Again, not all browsers work, but we didn’t need everything.



The example is corrected in accordance with the notes from the rWeb habrauser

 /* Webkit */ input:focus::-webkit-input-placeholder { color: transparent !important; } /* Mozilla Firefox 4 - 18 */ input:focus:-moz-placeholder { color: transparent !important; } /* Mozilla Firefox 19+ */ input:focus::-moz-placeholder { color: transparent !important; } /* IE 10+ */ input:focus:-ms-input-placeholder { color: transparent !important; } 

Invalid rendering of images with background-size: cover in webkit browsers (and not only).

Problem : the picture sometimes does not occupy the entire container, and there are single-pixel gaps along the edges of the container.



The first solution is : if it is acceptable to cut off a little extra from the image above what the cover cuts off, then using: after or: before we insert the pseudo-element into the container, assign a background image to it, and make it larger than the parent by a couple of pixels ( http://jsfiddle.net / Nvu3d / ).

 .element { position: relative; width: 200px; height: 100px; overflow: hidden; &:after { content:''; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; background-image: url(...); background-size: cover; } } 

The second solution : if this picture is used as a background and always occupies the entire window, then you can dynamically insert a media query, which will monitor the current aspect ratio of the browser window with the aspect ratio of the picture and set the background-size accordingly: auto 100% instead of the default background-size : 100% auto; ( http://jsfiddle.net/NRDA9/ )

 .element { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: url(...); background-size: 100% auto; background-position: 50% 50%; } @media screen and (max-aspect-ratio: IMAGE_WIDTH / IMAGE_HEIGHT) { .element { background-size: auto 100%; } } 

A ladder around an element when applying three-dimensional transformations to it in Firefox

Problem : when applying 3d transformations to the panel, which was complex in space, a terrible “ladder” was rendered in FireFox along the contour of the element.



Solution : apply a faint shadow to the element.

 .panel-body { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }