Neat Stuff With HTML & CSS

5 min readMar 3, 2019

--

Today we are gonna make some changes. Changes that will make our life easier. No more JS to do tasks that we can do with pure HTML & CSS.

In this article I’ll try to give the most powerful HTML & CSS properties to save us lot of developing time

Position Sticky

I think this is the most exciting and important feature. It doesn’t matter if you need a sticky header, footer, sidebar or any other component on the page.

Until position: sticky arrived we needed a JS code to handle the stickiness and the position related to the page.

Nowadays with position: sticky, we can stick the component to anywhere on the page easily. I know that not all browsers fully supporting (see support table bellow) this property, but they will and as soon as it will get fully support, the use of this property will be bigger

Demo of position sticky on several elements on page — https://codepen.io/chaofix/pen/a9f940015d1f0ea7ec452e6905a35068

Check this page time to time on CANIUSE— https://caniuse.com/#feat=css-sticky

You can also read Elad Shechter’s article regarding CSS Position Sticky — How It Really Works!

Scroll Snap Align

Scrolling are always been a tasks for JS. No matter if this is a gallery, pages or slides. Nowadays, with this CSS property, you can snap the content to the parent boundaries easy. Just add to parent the property scroll-snap-type: x mandatory or y mandatory or both mandatory (There is another option instead of mandatory — proximity) and on the children add scroll-snap-align: start or end or center and that’s it, the content will snap to parent boundaries or center

The support of this property is almost 100% with some tweaks:

Firefox needs an older version
IE / Edge needs the prefix -ms-
For iOS users needs to add -webkit-overflow-scrolling: touch; on the parent element

This property is so easy to use so you can abandon the JS code / library for scrolling content

Scroll snap on both axis — https://codepen.io/chaofix/pen/206d845358b7232d935d052eb4c240e1

Scroll snap type on CANIUSE — https://caniuse.com/#feat=css-snappoints

I wrote an article on this property with lot of examples and you can read it @medium CSS Scroll snap — how it really works

Masonry

Since the day that pinterest came into our life, one of the must popular gallery display is the masonry

This is a very nice way to display the items on the page but you needed a JS to do the calculation of the items, width, height etc.
With CSS display: grid and grid-auto-flow: denseYou can do that easy

Check the example below to understand how to do it today

https://codepen.io/chaofix/pen/dQXaxo

With this support — GRID — on CANIUSE, I don’t see why not to use it now — https://caniuse.com/#feat=css-grid

Placeholder Showen

I bet you already saw on other websites or apps inputs with label inside and as soon as the user click inside the input and start typing, the label “flies” above and getting smaller. You thought how it can be done. So you have the ability to do that with HTML and some CSS — You don’t need any JS code for doing that.

With a CSS pseudo-class called placeholder:shown we can check if the placeholder is visible or the user start to typing something in the input. If the placeholder is shown, nothing will happen but if the user start typing, we can change the label position and design.

Take a look on the example below and learn to do it by yourself easy

https://codepen.io/chaofix/pen/ccb6c93cc6a17b3d1f9793fedaf5b8b9

It is strange that Edge doesn’t support but IE10 and 11 does — Check the page on CANIUSE

:target

What are you doing when you need a tabs and there is no developer at your area? You can do several things:

Copy some JS code from the net and try to use it
You can use radio buttons with label and for
You can use the :target pseudo class

While the first one required a developer — and maybe you know JS but let’s think you don’t — and the second one can be sometimes pain in the xxx, the last one is very easy to use and have full browser supports

https://codepen.io/chaofix/pen/b8cee9231c3073d180c9ea13e74c6577

I can see only green at CANIUSE — https://caniuse.com/#search=%3Atarget

Accordion — <details> and <summary>

How many times you needed an accordion and you started search for JS code to do that? what if I’ll tell you that you can do it without any JS code and use only pure HTML? Sounds crazy? It’s not!

We have in HTML a nice tag called <details> and <summary>

To achieve an accordion, let’s use these tags and see it in action

https://codepen.io/chaofix/pen/923221c2e1c02a96f359b27da4e0f02d

I know that according CANIUSE IE and Edge doesn’t support this but soon Edge engine will be replace with chromium engine so…