Nick Davis

Tag: CSS

  • Why are CSS margins not collapsing?

    Flex items’ margins won’t collapse. When flex items wrap, they create their own row, and the individual margins on the flex items won’t collapse between rows. Only normal, adjacent block elements stacked will margin collapse the way you’re intending. This is a good reference – https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing You can create the same layout by removing the top margin from the li’s and making that a padding-top on the ul instead, then only the bottom

    Source: css – Why are margins not collapsing? – Stack Overflow

  • CSS Grid full-bleed layout tutorial

    https://joshwcomeau.com/css/full-bleed/

  • Customizing Checkboxes and Radios Inputs Using CSS

    Customizing Checkboxes and Radios Inputs Using CSS

  • How to inspect placeholder styles with browser developer tools

    Recently I had to do some debugging of placeholder styles for a project I was working on.

    If you do any kind of front end development work you’ll know that normally in a situation like this you’ll just use the inspect option in your browser’s developer tools to look at the styles being applied to the element in question.

    However, it may not be obvious how to inspect placeholder styles, but there are ways to inspect placeholders like any of the other element.

    Google Chrome (Mac, version 64)

    1. Open the developer tools section
    2. Go to Settings via the ‘three vertical dots’ icon (on the right side of the developer tools area)
    3. Under Elements, check Show user agent shadow DOM
    4. Now refresh the page and if you open up the relevant input field you’ll see that you can view the placeholder text by expanding the relevant input field

    Firefox (Mac, version 59)

    1. Open the developer tools and inspect the element you want to check the placeholder for.
    2. At the top of the Rules tab you’ll see a Pseudo-elements section.
    3. Expand this and you can explore pseudo-elements including ::moz-placeholder

    Safari (Mac, version 11)

    I’m not aware of any way to inspect placeholder elements in Safari at this time (let me know if you know though).

  • Right and left align menu items in a single container

    This technique will also preserve the order of your menu items. Whereas if you’d just floated some menu items to the right, the order of the right aligned items (if there were more than one) would now be wrong.

    Of course, this technique doesn’t just apply to menus but it seems to be the most common case I find for it out in the wild.

    [codepen_embed height=”265″ theme_id=”0″ slug_hash=”RpBwmE” default_tab=”html,result” user=”nickdavis”]See the Pen <a href=’https://codepen.io/nickdavis/pen/RpBwmE/’>Right and left aligned menu items in a single container</a> by Nick (<a href=’http://codepen.io/nickdavis’>@nickdavis</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

    Update (25 Mar 2017): Alain Schlesser (rightly) points out that this needs formatting for mobile. I should clarify that the above is only a proof of concept for a desktop view and I would re-format the layout for smaller screens (e.g. all centred, in a dropdown menu perhaps).

    In fact one of the bonuses of doing things this way is that you haven’t to create two different menus or extra containers within the menu to format things. So when it comes to mobile formatting you’ll hopefully have an easier time.