{"id":22377,"date":"2019-11-21T21:14:23","date_gmt":"2019-11-21T13:14:23","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22377"},"modified":"2022-08-07T19:29:17","modified_gmt":"2022-08-07T11:29:17","slug":"css3-properties-need-to-know","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/","title":{"rendered":"10 Hidden CSS3 Properties You Should Know"},"content":{"rendered":"<p>CSS3 has made designing the web more exciting with the introduction of new properties. While you might know of the popular ones, such as the <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-box-shadows-effects\/\">box-shadow<\/a>, <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-border-radius-in-internet-explorer\/\">border-radius<\/a>, and <a href=\"https:\/\/hongkiat.github.io\/css3-3d-transforms\/\">transform<\/a>, there are plenty more properties that you may not have heard of or tried, but would be glad to know of its existence.<\/p>\n<p>W3C is constantly working on new CSS properties to make the web much better for designers, developers, and users. In the meantime, let\u2019s take a look at these ten properties you may not know of but should really check out.<\/p>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\">Beginner\u2019s Guide to All Things CSS3<\/a><\/p>\n<h2>1. <a href=\"https:\/\/drafts.csswg.org\/css-text\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tab Size<\/a><\/h2>\n<p>Most code editors are equipped with <strong>Tab Size control<\/strong> that allows developers to specify the code indentation width made with the <span class=\"key\">Tab<\/span> key. It was only recently that we were also able to customize the indentation of the code embedded on webpages.<\/p>\n<pre>\r\npre {\r\n\ttab-size: 2;\r\n}<\/pre>\n<p>Note that each browser may have their own interpretation of how long the tab-width unit should be. So, we may expect to see some discrepancies among different browsers. In terms of browser support, the <code>tab-size<\/code> property works in Chrome, Opera, Firefox, and Safari <a href=\"https:\/\/caniuse.com\/css3-tabsize\" target=\"_blank\" rel=\"noopener noreferrer\">according to CanIUse<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/tab-size.jpg\" alt=\"tab size\" width=\"500\" height=\"320\"><\/figure>\n<h2>2. <a href=\"https:\/\/www.w3.org\/TR\/SVG11\/painting.html#TextRenderingProperty\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Text Rendering<\/a><\/h2>\n<p>The <code>text-rendering<\/code> property will tell  browsers  how they should render the text within webpages. The text will be optimized for performance, legibility, or precision, which will eventually determine the text quality. Take a closer look at the kerning of the text in the following screenshot for a comparison between \u2018normal\u2019 text and <code>optimizedLegibility<\/code> text:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/text-rendering.jpg\" alt=\"rendering size\" width=\"500\" height=\"200\">\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css3-mix-blend-mode\/\" class=\"ref-block__link\" title=\"Read More: Display Text on Image With CSS3 mix-blend-mode\" rel=\"bookmark\"><span class=\"screen-reader-text\">Display Text on Image With CSS3 mix-blend-mode<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-mix-blend-mode.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-28201 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-mix-blend-mode.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Display Text on Image With CSS3 mix-blend-mode<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tImage backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div><figcaption class=\"entry-image-caption\">IMAGE: AestheticallyLoyal<\/figcaption><\/figure>\n<p>For more advice on  good typography, check out <a href=\"https:\/\/practicaltypography.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Practical Typography<\/a>.<\/p>\n<h2>3. <a href=\"https:\/\/drafts.csswg.org\/css-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">Font Stretch<\/a><\/h2>\n<p>Some fonts provide additional faces aside from the regular Normal, Bold and Italic. Helvetica Neue or Myriad Pro as an example comes with faces such \u2018Condensed\u2019, \u2018Ultra-condensed\u2019, and \u2018Semi-condensed\u2019. This is where a new property called <code>font-stretch<\/code> is introduced; it allows us to apply these faces.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/normal-condensed.jpg\" alt=\"normal condensed\" width=\"500\" height=\"161\"><\/figure>\n<p>We may use <code>font-stretch<\/code> in conjunction with  font property like for instance,<code>font-style<\/code>. Here is an example:<\/p>\n<pre>\r\nh1 {\r\n\tfont-style: bold;\r\n\tfont-stretch: ;\r\n}<\/pre>\n<p>The <code>font-stretch<\/code> property currently only works in Firefox and Internet Explorer 9 (and above).<\/p>\n<h2>4. <a href=\"https:\/\/drafts.csswg.org\/css-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">Text Overflow<\/a><\/h2>\n<p>The <code>text-overflow<\/code> property specifies presentation of content that is overflowing or truncated by its container. The default value is set to <code>clip<\/code> which simply hides the truncated text. Alternately, you can set it to <code>ellipsis<\/code> to depict the truncated text or content <a href=\"https:\/\/unicode-table.com\/en\/2026\/\" target=\"_blank\" rel=\"noopener noreferrer\">with horizontal ellipsis<\/a>, as follows.<\/p>\n<pre>\r\n.content-box {\r\n\ttext-overflow\r\n}<\/pre>\n<p>In case you are wondering, horizontal ellipsis is the three dots at the end which usually indicates omitted content.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/text-overflow.jpg\" alt=\"text overflow\" width=\"500\" height=\"157\"><\/figure>\n<h2>5. <a href=\"https:\/\/drafts.csswg.org\/css-writing-modes\/\" target=\"_blank\" rel=\"noopener noreferrer\">Writing Mode<\/a><\/h2>\n<p>Not every language is written from the left to right direction. A few languages are instead written from top to bottom like Japanese or right to left like Arabic and Hebrew.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/writing-mode.jpg\" alt=\"writing mode\" width=\"500\" height=\"195\"><figcaption class=\"entry-image-caption\"><a href=\"https:\/\/www.amirifont.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">IMAGE: AimiriFont<\/a><\/figcaption><\/figure>\n<p>To accommodate these languages, a new property named <code>writing-mode<\/code> is introduced to let developers change the content writing direction through CSS. This code snippet, as an example, directs the content flow from the left to the right (regardless of the language).<\/p>\n<pre>\r\np {\r\n\twriting-mode: rl-tb;\r\n}<\/pre>\n<p>To change the flow of content, moving from top to bottom, set the property with the <code>vertical-lr<\/code> value:<\/p>\n<pre>\r\np {\r\n\twriting-mode: vertical-lr;\r\n}<\/pre>\n<h2>6. <a href=\"https:\/\/www.w3.org\/TR\/SVG11\/interact.html#PointerEventsProperty\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Pointer Events<\/a><\/h2>\n<p>The <code>pointer-events<\/code> property allows us to control element behavior under pointer events like dragging, hovering and clicking. Using this, the affected link will do nothing when it is clicked; the link will be completely disabled, and will not even direct users to the address specified in the <code>href<\/code> attribute.<\/p>\n<pre>\r\na {\r\n\tpointer-events: none;\r\n}<\/pre>\n<p>Due to some critical issues however the <code>pointer-events<\/code> property is put on hold until the next CSS revision, <strong>CSS4<\/strong>.<\/p>\n<h2>7. <a href=\"https:\/\/drafts.csswg.org\/css-images-3\/\" target=\"_blank\" rel=\"noopener noreferrer\">Image Orientation<\/a><\/h2>\n<p>In an image editor such as Photoshop, you can change the image orientation by rotating or flipping the image. Now CSS3 allows you to do the same to the images on webpages through a new property called <code>image-orientation<\/code>. Here is an example on how we can flip an image horizontally using this property.<\/p>\n<pre>\r\nimg {\r\n\timage-orientation: flip;\t\r\n}<\/pre>\n<p>You can also retain the original image orientation by specifying the property value to <code>from-image<\/code>, like so.<\/p>\n<pre>\r\nimg {\r\n\timage-orientation: from-image;\r\n}<\/pre>\n<h2>8. <a href=\"https:\/\/drafts.csswg.org\/css-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">Image Rendering<\/a><\/h2>\n<p>Similar to the <code>text-rendering<\/code> property, <code>image-rendering<\/code> defines the image quality on webpages, in particular when the image is forcefully resized. With the advent of this property comes a number of new values, and browsers have their own specifications in this matter. The <code>crisp-edges<\/code> value, for example, which preserves contrast and prevents blurry edges of  images, is currently translated as <code>-webkit-optimize-contrast<\/code> in Webkit browsers and <code>nearest-neighbor<\/code> in Internet Explorer.<\/p>\n<pre>\r\nimg {\r\n\timage-rendering: crisp-edges;\r\n\timage-rendering: -webkit-optimize-contrast;\/* Webkit *\/\r\n\t-ms-interpolation-mode: nearest-neighbor;  \/* IE *\/\r\n}<\/pre>\n<p>It\u2019s an experimental technology, so we will likely see a few changes in the implementation.<\/p>\n<h2>9. <a href=\"https:\/\/drafts.csswg.org\/css-multicol\/\" target=\"_blank\" rel=\"noopener noreferrer\">Columns<\/a><\/h2>\n<p>The <code>columns<\/code> property allows developers to arrange web content into columns with ease. We split the content into two columns like this:<\/p>\n<pre>\r\n.content {\r\n\tcolumns: 2;\r\n}<\/pre>\n<p>In the browsers that support this property \u2013 like Chrome and Safari \u2013 we will see the content arranged like so.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/columns.jpg\" alt=\"columns\" width=\"500\" height=\"183\"><\/figure>\n<p>Coupled with CSS Shape and a bit of creativity, you can have a fluid and more enticing content layout much like what you see in a fashion magazine on your websites.<\/p>\n<h2>10. <a href=\"https:\/\/drafts.csswg.org\/css-flexbox\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flex<\/a><\/h2>\n<p>The <code>flex<\/code> property aims to make building responsive grid more seamless while solving a couple of issues in the current mainstream method for web layout arrangement \u2013 the <code>float<\/code> property.<\/p>\n<p>On top of that, by using the flex property, the web layout will take the full height of its container, which was quite cumbersome to deal with previously (take a look at our previous post on this matter: <a href=\"https:\/\/www.hongkiat.com\/blog\/css-equal-height\/\">Equal Column Height With CSS<\/a>).<\/p>\n<p>Now, assuming you would like to build a web layout that comprises of three columns, you can have the markup arranged this way.<\/p>\n<pre>\r\n&lt;div id=\"container\"&gt;\r\n\t&lt;div class=\"col\"&gt;Column 1&lt;\/div&gt;\r\n\t&lt;div class=\"col\"&gt;Column 2&lt;\/div&gt;\r\n\t&lt;div class=\"col\"&gt;Column 3&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Then, build them into columns using the <code>flex<\/code> property, like so.<\/p>\n<pre>\r\n#container {\r\n\twidth: 600px;\r\n\theight: 300px;\r\n\tdisplay: flex;\r\n}\r\n#container .col {\r\n\tflex: auto;\r\n}<\/pre>\n<p>With additions of decorative styles like font and background color, we will get the following result.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/flex.jpg\" alt=\"flex\" width=\"500\" height=\"265\"><\/figure>\n<ul class=\"download\">\n<li><a rel=\"nofollow\" href=\"https:\/\/hongkiat.github.io\/css-flexbox\/\">View Demo<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>CSS3 has made designing the web more exciting with the introduction of new properties. While you might know of the popular ones, such as the box-shadow, border-radius, and transform, there are plenty more properties that you may not have heard of or tried, but would be glad to know of its existence. W3C is constantly&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 Hidden CSS3 Properties You Should Know - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS3 has made designing the web more exciting with the introduction of new properties. While you might know of the popular ones, such as the box-shadow,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Hidden CSS3 Properties You Should Know\" \/>\n<meta property=\"og:description\" content=\"CSS3 has made designing the web more exciting with the introduction of new properties. While you might know of the popular ones, such as the box-shadow,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-21T13:14:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-07T11:29:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/tab-size.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"10 Hidden CSS3 Properties You Should Know\",\"datePublished\":\"2019-11-21T13:14:23+00:00\",\"dateModified\":\"2022-08-07T11:29:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/\"},\"wordCount\":913,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-properties-need-to-know\\\/tab-size.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/\",\"name\":\"10 Hidden CSS3 Properties You Should Know - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-properties-need-to-know\\\/tab-size.jpg\",\"datePublished\":\"2019-11-21T13:14:23+00:00\",\"dateModified\":\"2022-08-07T11:29:17+00:00\",\"description\":\"CSS3 has made designing the web more exciting with the introduction of new properties. While you might know of the popular ones, such as the box-shadow,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-properties-need-to-know\\\/tab-size.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-properties-need-to-know\\\/tab-size.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-properties-need-to-know\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Hidden CSS3 Properties You Should Know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Hidden CSS3 Properties You Should Know - Hongkiat","description":"CSS3 has made designing the web more exciting with the introduction of new properties. While you might know of the popular ones, such as the box-shadow,","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:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/","og_locale":"en_US","og_type":"article","og_title":"10 Hidden CSS3 Properties You Should Know","og_description":"CSS3 has made designing the web more exciting with the introduction of new properties. While you might know of the popular ones, such as the box-shadow,","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-11-21T13:14:23+00:00","article_modified_time":"2022-08-07T11:29:17+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/tab-size.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"10 Hidden CSS3 Properties You Should Know","datePublished":"2019-11-21T13:14:23+00:00","dateModified":"2022-08-07T11:29:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/"},"wordCount":913,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/tab-size.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/","name":"10 Hidden CSS3 Properties You Should Know - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/tab-size.jpg","datePublished":"2019-11-21T13:14:23+00:00","dateModified":"2022-08-07T11:29:17+00:00","description":"CSS3 has made designing the web more exciting with the introduction of new properties. While you might know of the popular ones, such as the box-shadow,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/tab-size.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-properties-need-to-know\/tab-size.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-properties-need-to-know\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Hidden CSS3 Properties You Should Know"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5OV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=22377"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22377\/revisions"}],"predecessor-version":[{"id":61286,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22377\/revisions\/61286"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=22377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=22377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=22377"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=22377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}