VOOZH about

URL: https://html-css-tip-of-the-week.netlify.app

⇱ HTML & CSS Tip of the Week

HTML & CSS Tip of the Week

  • One corner, two border radii

    Did you know you can control the border radius of both sides of a corner indepenently of one another? It might seem a little strange to do, but you can do some intersting things with it!

  • The picture element

    Sometimes, designs have different images for large and small screen layouts. In those situations, it can be tempting to simply bring in multiple images and use a media query in your CSS to control when we see each one, but the <picture> element is purpose-built for these situations.

  • Single-colour gradients

    It might seem strange, but single-colour gradients can come in handy in a few different ways!

  • @property

    Register custom CSS properties with specific syntax to enable smooth animations and transitions.

  • :nth-last-child

    Select elements by counting backwards from the end using the :nth-last-child pseudo-class selector.

  • calc-size()

    We can now do calculations based on the intrinsic size of an element

  • The <output> element

    Display calculation results and user interaction outcomes with semantic HTML using the output element.

  • The datalist element

    Create autocomplete dropdowns with suggestions using the datalist element without JavaScript.

  • :out-of-range

    A quick look at the :not-in-range psuedo-class.

  • :placeholder-shown

    A quick look at the :placeholder-shown pseudo-class for styling form elements that are displaying placeholder text.

  • input type='color'

    Easily add a color picker to your page using an input with a type of color.

  • :only-child

    Learn how to use the :only-child selector to style elements differently when they have no siblings. Perfect for adaptive designs with optional elements like figure captions. Plus, see how combining it with :has() creates powerful parent styling possibilities.

  • The <q> element

    When creating quotes in HTML, most people are aware of the <blockquote> element, but for shorter quotes you might want an inline element, and that is where the <q> element comes in

  • input type="number"

    Number inputs can be useful, but they aren't as straight forward as they might seem at first.

  • The search element

    A quick look at the search element, a semantic element for search and filtering

  • The :has() pseudo-selector

    The :has() relational selector allows you to select parents of elements, but also preceding elements, siblings, and much more!

  • The <kbd> element

    An underused HTML element for when we want to show keyboard commands and user inputs.

If you want to make sure you never miss an update, you can sign up below to get them delivered straight to your inbox, or you can subscribe to the RSS feed.