{"id":1918,"date":"2015-12-14T23:34:25","date_gmt":"2015-12-15T07:34:25","guid":{"rendered":"http:\/\/hellbach.us\/blog\/?p=1918"},"modified":"2015-12-14T23:34:25","modified_gmt":"2015-12-15T07:34:25","slug":"css-protips","status":"publish","type":"post","link":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/","title":{"rendered":"CSS Protips"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1550,&quot;href&quot;:&quot;https:\\\/\\\/css-tricks.com\\\/centering-css-complete-guide&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250827205917\\\/https:\\\/\\\/css-tricks.com\\\/centering-css-complete-guide\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 22:06:19&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 22:06:19&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:1551,&quot;href&quot;:&quot;https:\\\/\\\/github.com\\\/philipwalton\\\/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20251012141806\\\/https:\\\/\\\/github.com\\\/philipwalton\\\/flexbugs&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 22:06:49&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 22:06:49&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:1552,&quot;href&quot;:&quot;https:\\\/\\\/bocoup.com\\\/weblog\\\/text-rendering&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20160401040714\\\/https:\\\/\\\/bocoup.com\\\/weblog\\\/text-rendering&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 22:06:51&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 22:06:51&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:1553,&quot;href&quot;:&quot;https:\\\/\\\/github.com\\\/AllThingsSmitty\\\/css-protips?utm_content=bufferf124a&amp;utm_medium=social&amp;utm_source=facebook.com&amp;utm_campaign=buffer#support&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:1554,&quot;href&quot;:&quot;https:\\\/\\\/github.com\\\/AllThingsSmitty\\\/css-protips&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20251004155725\\\/https:\\\/\\\/github.com\\\/AllThingsSmitty\\\/css-protips&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 22:06:55&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 22:06:55&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>A collection of tips to help take your CSS skills pro.<\/p>\n<ol>\n<li><a href=\"#use-not-to-applyunapply-borders-on-navigation\">Use <code>:not()<\/code> to Apply\/Unapply Borders on Navigation<\/a><\/li>\n<li><a href=\"#add-line-height-to-body\">Add Line-Height to <code>body<\/code><\/a><\/li>\n<li><a href=\"#vertically-center-anything\">Vertically-Center Anything<\/a><\/li>\n<li><a href=\"#comma-separated-lists\">Comma-Separated Lists<\/a><\/li>\n<li><a href=\"#select-items-using-negative-nth-child\">Select Items Using Negative <code>nth-child<\/code><\/a><\/li>\n<li><a href=\"#use-svg-for-icons\">Use SVG for Icons<\/a><\/li>\n<li><a href=\"#text-display-optimization\">Text Display Optimization<\/a><\/li>\n<li><a href=\"#use-max-height-for-pure-css-sliders\">Use <code>max-height<\/code> for Pure CSS Sliders<\/a><\/li>\n<li><a href=\"#inherit-box-sizing\">Inherit <code>box-sizing<\/code><\/a><\/li>\n<li><a href=\"#equal-width-table-cells\">Equal Width Table Cells<\/a><\/li>\n<li><a href=\"#get-rid-of-margin-hacks-with-flexbox\">Get Rid of Margin Hacks With Flexbox<\/a><\/li>\n<li><a href=\"#use-attribute-selectors-with-empty-links\">Use Attribute Selectors with Empty Links<\/a><\/li>\n<li><a href=\"#style-default-links\">Style &#8220;Default&#8221; Links<\/a><\/li>\n<\/ol>\n<h3><a id=\"user-content-use-not-to-applyunapply-borders-on-navigation\" class=\"anchor\" href=\"#use-not-to-applyunapply-borders-on-navigation\"><\/a>Use <code>:not()<\/code> to Apply\/Unapply Borders on Navigation<\/h3>\n<p>Instead of putting on the border&#8230;<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-c\">\/* add border *\/<\/span>\r\n<span class=\"pl-e\">.nav<\/span> <span class=\"pl-ent\">li<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">border-right<\/span><\/span>: <span class=\"pl-c1\">1<span class=\"pl-k\">px<\/span><\/span> <span class=\"pl-c1\">solid<\/span> <span class=\"pl-c1\">#666<\/span>;\r\n}<\/pre>\n<\/div>\n<p>&#8230;and then taking it off the last element&#8230;<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-c\">\/* remove border *\/<\/span>\r\n<span class=\"pl-e\">.nav<\/span> <span class=\"pl-ent\">li<\/span><span class=\"pl-e\">:last-child<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">border-right<\/span><\/span>: <span class=\"pl-c1\">none<\/span>;\r\n}<\/pre>\n<\/div>\n<p>&#8230;use the <code>:not()<\/code> pseudo-class to only apply to the elements you want:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-e\">.nav<\/span> <span class=\"pl-ent\">li<\/span><span class=\"pl-e\">:not<\/span>(<span class=\"pl-e\">:last-child<\/span>) {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">border-right<\/span><\/span>: <span class=\"pl-c1\">1<span class=\"pl-k\">px<\/span><\/span> <span class=\"pl-c1\">solid<\/span> <span class=\"pl-c1\">#666<\/span>;\r\n}<\/pre>\n<\/div>\n<p>Sure, you can use <code>.nav li + li<\/code> or even <code>.nav li:first-child ~ li<\/code>, but with <code>:not()<\/code> the intent is very clear and the CSS selector defines the border the way a human would describe it.<\/p>\n<h3><a id=\"user-content-add-line-height-to-body\" class=\"anchor\" href=\"#add-line-height-to-body\"><\/a>Add Line-Height to <code>body<\/code><\/h3>\n<p>You don&#8217;t need to add <code>line-height<\/code> to each <code>&lt;p&gt;<\/code>, <code>&lt;h*&gt;<\/code>, <em>et al<\/em>. separately. Instead, add it to <code>body<\/code>:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-ent\">body<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">line-height<\/span><\/span>: <span class=\"pl-c1\">1<\/span>;\r\n}<\/pre>\n<\/div>\n<p>This way textual elements can inherit from <code>body<\/code> easily.<\/p>\n<h3><a id=\"user-content-vertically-center-anything\" class=\"anchor\" href=\"#vertically-center-anything\"><\/a>Vertically-Center Anything<\/h3>\n<p>No, it&#8217;s not black magic, you really can center elements vertically:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-ent\">html<\/span>, <span class=\"pl-ent\">body<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">height<\/span><\/span>: <span class=\"pl-c1\">100<span class=\"pl-k\">%<\/span><\/span>;\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">margin<\/span><\/span>: <span class=\"pl-c1\">0<\/span>;\r\n}\r\n\r\n<span class=\"pl-ent\">body<\/span> {\r\n  <span class=\"pl-c1\">-webkit-<span class=\"pl-c1\">align<\/span>-items<\/span>: <span class=\"pl-c1\">center<\/span>;  \r\n  <span class=\"pl-c1\">-ms-<span class=\"pl-c1\">flex<\/span>-<span class=\"pl-c1\">align<\/span><\/span>: <span class=\"pl-c1\">center<\/span>;  \r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">align<\/span>-items<\/span>: <span class=\"pl-c1\">center<\/span>;\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">display<\/span><\/span>: -webkit-flex;\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">display<\/span><\/span>: flex;\r\n}<\/pre>\n<\/div>\n<p>Want to center something else? Vertically, horizontally&#8230;anything, anytime, anywhere? CSS-Tricks has <a href=\"https:\/\/css-tricks.com\/centering-css-complete-guide\/\">a nice write-up<\/a> on doing all of that.<\/p>\n<p><strong>Note:<\/strong> Watch for some <a href=\"https:\/\/github.com\/philipwalton\/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items\">buggy behavior<\/a> with flexbox in IE11.<\/p>\n<h3><a id=\"user-content-comma-separated-lists\" class=\"anchor\" href=\"#comma-separated-lists\"><\/a>Comma-Separated Lists<\/h3>\n<p>Make list items look like a real, comma-separated list:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-ent\">ul<\/span> &gt; <span class=\"pl-ent\">li<\/span><span class=\"pl-e\">:not<\/span>(<span class=\"pl-e\">:last-child<\/span>)<span class=\"pl-e\">::after<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">content<\/span><\/span>: <span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>,<span class=\"pl-pds\">\"<\/span><\/span>;\r\n}<\/pre>\n<\/div>\n<p>Use the <code>:not()<\/code> pseudo-class so no comma is added to the last item.<\/p>\n<h3><a id=\"user-content-select-items-using-negative-nth-child\" class=\"anchor\" href=\"#select-items-using-negative-nth-child\"><\/a>Select Items Using Negative <code>nth-child<\/code><\/h3>\n<p>Use negative <code>nth-child<\/code> in CSS to select items 1 through n.<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-ent\">li<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">display<\/span><\/span>: <span class=\"pl-c1\">none<\/span>;\r\n}\r\n\r\n<span class=\"pl-c\">\/* select items 1 through 3 and display them *\/<\/span>\r\n<span class=\"pl-ent\">li<\/span><span class=\"pl-e\">:nth-child<\/span>(<span class=\"pl-c1\">-n+3<\/span>) {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">display<\/span><\/span>: <span class=\"pl-c1\">block<\/span>;\r\n}<\/pre>\n<\/div>\n<p>Or, since you&#8217;ve already learned a little about <a href=\"#use-not-to-applyunapply-borders-on-navigation\">using <code>:not()<\/code><\/a>, try:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-c\">\/* select items 1 through 3 and display them *\/<\/span>\r\n<span class=\"pl-ent\">li<\/span><span class=\"pl-e\">:not<\/span>(<span class=\"pl-e\">:nth-child<\/span>(<span class=\"pl-c1\">-n+3<\/span>)) {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">display<\/span><\/span>: <span class=\"pl-c1\">none<\/span>;\r\n}<\/pre>\n<\/div>\n<p>Well that was pretty easy.<\/p>\n<h3><a id=\"user-content-use-svg-for-icons\" class=\"anchor\" href=\"#use-svg-for-icons\"><\/a>Use SVG for Icons<\/h3>\n<p>There&#8217;s no reason not to use SVG for icons:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-e\">.logo<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">background<\/span><\/span>: <span class=\"pl-c1\">url<\/span>(<span class=\"pl-s\"><span class=\"pl-pds\">\"<\/span>logo.svg<span class=\"pl-pds\">\"<\/span><\/span>);\r\n}<\/pre>\n<\/div>\n<p>SVG scales well for all resolution types and is supported in all browsers back to IE9. So ditch your .png, .jpg, or .gif-jif-whatev files.<\/p>\n<p><strong>Note:<\/strong> If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-e\">.no-svg<\/span> <span class=\"pl-e\">.icon-only<\/span><span class=\"pl-e\">:after<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">content<\/span><\/span>: <span class=\"pl-c1\">attr<\/span>(<span class=\"pl-v\">aria-label<\/span>);\r\n}<\/pre>\n<\/div>\n<h3><a id=\"user-content-text-display-optimization\" class=\"anchor\" href=\"#text-display-optimization\"><\/a>Text Display Optimization<\/h3>\n<p>Sometimes fonts don&#8217;t display optimally on all devices, so let the device browser help:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-ent\">html<\/span> {\r\n  <span class=\"pl-c1\">-moz-osx-<span class=\"pl-c1\">font<\/span>-smoothing<\/span>: grayscale;\r\n  <span class=\"pl-c1\">-webkit-<span class=\"pl-c1\">font<\/span>-smoothing<\/span>: antialiased;\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">text<\/span>-rendering<\/span>: <span class=\"pl-c1\">optimizeLegibility<\/span>;\r\n}<\/pre>\n<\/div>\n<p><strong>Note:<\/strong> <a href=\"https:\/\/bocoup.com\/weblog\/text-rendering\/\">Please play with <code>optimizeLegibility<\/code> responsibly<\/a>. Also, there&#8217;s no <code>text-rendering<\/code> support for IE\/Edge.<\/p>\n<h3><a id=\"user-content-use-max-height-for-pure-css-sliders\" class=\"anchor\" href=\"#use-max-height-for-pure-css-sliders\"><\/a>Use <code>max-height<\/code> for Pure CSS Sliders<\/h3>\n<p>Implement CSS-only sliders using <code>max-height<\/code> with overflow hidden:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-e\">.slider<\/span> <span class=\"pl-ent\">ul<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">max-height<\/span><\/span>: <span class=\"pl-c1\">0<\/span>;\r\n  <span class=\"pl-c1\">overlow<\/span>: <span class=\"pl-c1\">hidden<\/span>;\r\n}\r\n\r\n<span class=\"pl-e\">.slider<\/span><span class=\"pl-e\">:hover<\/span> <span class=\"pl-ent\">ul<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">max-height<\/span><\/span>: <span class=\"pl-c1\">1000<span class=\"pl-k\">px<\/span><\/span>;\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">transition<\/span><\/span>: <span class=\"pl-c1\">.3<span class=\"pl-k\">s<\/span><\/span> ease; <span class=\"pl-c\">\/* animate to max-height *\/<\/span>\r\n}<\/pre>\n<\/div>\n<h3><a id=\"user-content-inherit-box-sizing\" class=\"anchor\" href=\"#inherit-box-sizing\"><\/a>Inherit <code>box-sizing<\/code><\/h3>\n<p>Let <code>box-sizing<\/code> be inheritted from <code>html<\/code>:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-ent\">html<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">box-sizing<\/span><\/span>: border-box;\r\n}\r\n\r\n<span class=\"pl-ent\">*<\/span>, <span class=\"pl-ent\">*<\/span><span class=\"pl-e\">:before<\/span>, <span class=\"pl-ent\">*<\/span><span class=\"pl-e\">:after<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">box-sizing<\/span><\/span>: <span class=\"pl-c1\">inherit<\/span>;\r\n}\r\n<\/pre>\n<\/div>\n<p>This makes it easier to change <code>box-sizing<\/code> in plugins or other components that leverage other behavior.<\/p>\n<h3><a id=\"user-content-equal-width-table-cells\" class=\"anchor\" href=\"#equal-width-table-cells\"><\/a>Equal Width Table Cells<\/h3>\n<p>Tables can be a pain to work with so try using <code>table-layout: fixed<\/code> to keep cells at equal width:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-e\">.calendar<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">table-layout<\/span><\/span>: <span class=\"pl-c1\">fixed<\/span>;\r\n}<\/pre>\n<\/div>\n<p>Pain-free table layouts.<\/p>\n<h3><a id=\"user-content-get-rid-of-margin-hacks-with-flexbox\" class=\"anchor\" href=\"#get-rid-of-margin-hacks-with-flexbox\"><\/a>Get Rid of Margin Hacks With Flexbox<\/h3>\n<p>When working with column gutters you can get rid of <code>nth-<\/code>, <code>first-<\/code>, and <code>last-child<\/code> hacks by using flexbox&#8217;s <code>space-between<\/code> property:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-e\">.list<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">display<\/span><\/span>: flex;\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">justify<\/span>-<span class=\"pl-c1\">content<\/span><\/span>: space-between;\r\n}\r\n\r\n<span class=\"pl-e\">.list<\/span> <span class=\"pl-e\">.person<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">flex<\/span>-basis<\/span>: <span class=\"pl-c1\">23<span class=\"pl-k\">%<\/span><\/span>;\r\n}<\/pre>\n<\/div>\n<p>Now column gutters always appear evenly-spaced.<\/p>\n<h3><a id=\"user-content-use-attribute-selectors-with-empty-links\" class=\"anchor\" href=\"#use-attribute-selectors-with-empty-links\"><\/a>Use Attribute Selectors with Empty Links<\/h3>\n<p>Display links when the <code>&lt;a&gt;<\/code> element has no text value but the <code>href<\/code> attribute has a link:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-ent\">a<\/span>[href^=\"http\"]<span class=\"pl-e\">:empty<\/span><span class=\"pl-e\">::before<\/span> {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">content<\/span><\/span>: <span class=\"pl-c1\">attr<\/span>(<span class=\"pl-v\">href<\/span>);\r\n}\r\n<\/pre>\n<\/div>\n<p>That&#8217;s pretty convenient.<\/p>\n<h3><a id=\"user-content-style-default-links\" class=\"anchor\" href=\"#style-default-links\"><\/a>Style &#8220;Default&#8221; Links<\/h3>\n<p>Add a style for &#8220;default&#8221; links:<\/p>\n<div class=\"highlight highlight-source-css\">\n<pre><span class=\"pl-ent\">a<\/span>[href]<span class=\"pl-e\">:not<\/span>([class]) {\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">color<\/span><\/span>: <span class=\"pl-c1\">#008000<\/span>;\r\n  <span class=\"pl-c1\"><span class=\"pl-c1\">text-decoration<\/span><\/span>: <span class=\"pl-c1\">underline<\/span>;\r\n}<\/pre>\n<\/div>\n<p>Now links that are inserted via a CMS, which don&#8217;t usually have a <code>class<\/code> attribute, will have a distinction without generically affecting the cascade.<\/p>\n<h3><a id=\"user-content-support\" class=\"anchor\" href=\"https:\/\/github.com\/AllThingsSmitty\/css-protips?utm_content=bufferf124a&amp;utm_medium=social&amp;utm_source=facebook.com&amp;utm_campaign=buffer#support\"><\/a>Support<\/h3>\n<p>These protips work in current versions of Chrome, Firefox, Safari, and Edge, and in IE11.<\/p>\n<p><em>source: github <a href=\"https:\/\/github.com\/AllThingsSmitty\/css-protips\" target=\"_blank\" rel=\"nofollow\">css-protip<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A collection of tips to help take your CSS skills pro. Use :not() to Apply\/Unapply Borders on Navigation Add Line-Height to body Vertically-Center Anything Comma-Separated Lists Select Items Using Negative nth-child Use SVG for Icons Text Display Optimization Use max-height &hellip; <a href=\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[138,139],"class_list":["post-1918","post","type-post","status-publish","format-standard","hentry","category-dev","tag-css","tag-tips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Protips - Hellbach blog<\/title>\n<meta name=\"description\" content=\"css-protips - A collection of tips to help take your CSS skills pro.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Protips\" \/>\n<meta property=\"og:description\" content=\"css-protips - A collection of tips to help take your CSS skills pro\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/\" \/>\n<meta property=\"og:site_name\" content=\"Hellbach blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-15T07:34:25+00:00\" \/>\n<meta name=\"author\" content=\"alex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"CSS Protips\" \/>\n<meta name=\"twitter:description\" content=\"css-protips - A collection of tips to help take your CSS skills pro\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/github.com\/fluidicon.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/\"},\"author\":{\"name\":\"alex\",\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"headline\":\"CSS Protips\",\"datePublished\":\"2015-12-15T07:34:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/\"},\"wordCount\":498,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"keywords\":[\"css\",\"tips\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/\",\"url\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/\",\"name\":\"CSS Protips - Hellbach blog\",\"isPartOf\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#website\"},\"datePublished\":\"2015-12-15T07:34:25+00:00\",\"description\":\"css-protips - A collection of tips to help take your CSS skills pro.\",\"breadcrumb\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hellbach.us\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Protips\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hellbach.us\/blog\/#website\",\"url\":\"https:\/\/hellbach.us\/blog\/\",\"name\":\"Hellbach blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hellbach.us\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\",\"name\":\"alex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g\",\"caption\":\"alex\"},\"logo\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Protips - Hellbach blog","description":"css-protips - A collection of tips to help take your CSS skills pro.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/","og_locale":"en_US","og_type":"article","og_title":"CSS Protips","og_description":"css-protips - A collection of tips to help take your CSS skills pro","og_url":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/","og_site_name":"Hellbach blog","article_published_time":"2015-12-15T07:34:25+00:00","author":"alex","twitter_card":"summary_large_image","twitter_title":"CSS Protips","twitter_description":"css-protips - A collection of tips to help take your CSS skills pro","twitter_image":"https:\/\/github.com\/fluidicon.png","twitter_misc":{"Written by":"alex","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/#article","isPartOf":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/"},"author":{"name":"alex","@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"headline":"CSS Protips","datePublished":"2015-12-15T07:34:25+00:00","mainEntityOfPage":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/"},"wordCount":498,"commentCount":0,"publisher":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"keywords":["css","tips"],"articleSection":["Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/","url":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/","name":"CSS Protips - Hellbach blog","isPartOf":{"@id":"https:\/\/hellbach.us\/blog\/#website"},"datePublished":"2015-12-15T07:34:25+00:00","description":"css-protips - A collection of tips to help take your CSS skills pro.","breadcrumb":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/css-protips\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hellbach.us\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Protips"}]},{"@type":"WebSite","@id":"https:\/\/hellbach.us\/blog\/#website","url":"https:\/\/hellbach.us\/blog\/","name":"Hellbach blog","description":"","publisher":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hellbach.us\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507","name":"alex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g","caption":"alex"},"logo":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts\/1918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/comments?post=1918"}],"version-history":[{"count":0,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts\/1918\/revisions"}],"wp:attachment":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/media?parent=1918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/categories?post=1918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/tags?post=1918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}