Guide: Best CSS3 Properties You Might Have Missed
CSS3 has made website design more exciting with the introduction of new features. While you may know the popular ones, such as the box shadow, border radius, and transform, there are many more properties that you may not have heard or tried, but would like to know exist. W3C is constantly working on new CSS features to make the web much better for designers, developers and users. In the meantime, let’s take a look at these 10 properties you may not know about, but really should check out.
1. Tab size
Most code editors are equipped with Tab size that allows developers to specify the code indentation width created with the Tab key. Only recently were we also able to adjust the indentation of the code embedded on web pages. pre {tab-size: 2;} Note that each browser can have its own interpretation of how long the tab width unit should be. So we can expect some discrepancies between different browsers. In terms of browser support, the tab size property works according to CanIUse in Chrome, Opera, Firefox and Safari.
2. Text display
The text rendering property tells browsers how to display the text within web pages. The text is optimized for performance, readability, or precision, which will ultimately determine text quality. Look at the kerning of the text in the following screenshot for a comparison between ‘normal’ text and optimized readability text: IMAGE: Aesthetically loyal For more advice on good typography, see Practical Typography.
3. Stretch font
Some fonts provide additional faces in addition to the normal Normal, Bold, and Italic fonts. For example, Helvetica Neue or Myriad Pro comes with faces such as ‘Condensed’, ‘Ultra-condensed’ and ‘Semi-condensed’. This is where a new property called font-stretch is introduced; it allows us to apply these faces.
We can use font-stretch in combination with font properties such as font-style. Here’s an example: h1 {font-style: bold; font-stretch :;} The font stretch property currently only works in Firefox and Internet Explorer 9 (and higher).
4. Text overflow
The text-overflow property specifies the presentation of content that is overflowing or truncated by the container. The default value is set to clip, which makes it easy to hide the truncated text. Alternatively, you can set it to ellipse as follows to display the truncated text or content with horizontal ellipse. .content-box {text-overflow} In case you’re wondering, horizontal ellipse are the three dots at the end that usually indicate the omitted content.
5. Writing mode
Not every language is written from left to right. A few languages are written top to bottom instead, such as Japanese or right to left, such as Arabic and Hebrew. IMAGE: AimiriFont To enable these languages, a new property called write-mode is introduced that allows developers to change the direction of content writing via CSS. This code snippet, as an example, guides the content stream from left to right (regardless of language). p {writing mode: rl-tb;} To change the flow of content, go from top to bottom, set the property with the value vertical-lr: p {writing mode: vertical-lr;}
6. Pointer Events
The pointer events property allows us to control the behavior of elements under pointer events such as dragging, hovering, and clicking. If you use this, the link in question will not do anything when clicked; the link will be completely disabled and will not even direct users to the address specified in the href attribute. a {pointer-events: none;} However, due to some critical issues, the pointer-events property is put on hold until the next CSS revision, CSS4
7. Image orientation
In an image editor such as Photoshop, you can change the orientation of the image by rotating or flipping the image. Now you can do the same with the images on web pages using CSS3 through a new property called image orientation. Here’s an example of how we can flip an image horizontally with this property. img {image orientation: flip;} You can also keep the original orientation of the image by specifying the property value in from-image, like so. img {image-orientation: from-image;}
8. Render image
As with the text rendering property, image rendering defines image quality on web pages, especially when the image is resized vigorously. With the advent of this feature come a number of new values and browsers have their own specifications in this area. The sharp-edged value, for example, which maintains contrast and prevents image blur, is currently translated as -webkit-optimize-contrast in Webkit browsers and nearest neighbor in Internet Explorer. img {image-rendering: sharp-edges; image-rendering: -webkit-optimize-contrast; / * Webkit * / – ms interpolation mode: nearest neighbor; / * IE * /} It’s an experimental technology, so we’ll likely see a few changes in implementation.
9. Columns
The Columns property makes it easy for developers to arrange web content in columns. We split the content into two columns as follows: .content {columns: 2;} In the browsers that support this feature, such as Chrome and Safari, we will see the content arranged like this.
When combined with CSS Shape and a little creativity, you can have a fluid and more engaging content layout similar to what you see on your websites in a fashion magazine.
10. Flex
The flex property aims to make building a responsive grid seamless while solving a number of problems in the current common method of arranging web layouts – the float property. Plus, using the flex property, the web layout takes up the full height of the container, which was rather cumbersome to deal with before (check out our previous post on this issue: Equal Column Height With CSS) . Now suppose you want to build a web layout consisting of three columns, you can have the layout arranged like this. Then build them up in columns using the flex property, like so. #container {width: 600px; height: 300px; display: flex;} # container .col {flex: auto;} With additions of decorative styles such as font and background color, we get the following result.
Best CSS3 Properties You Might Have Missed: benefits
[wpsm_list type=”star”]
The Best CSS3 Properties You Might Have Missed tutorial is free . This guide already helps so many users follow up with interest in a timely manner. The price of the Best CSS3 Properties You Might Have Missed guide is free.
[/wpsm_list]
Faq
[wpsm_accordion] [wpsm_accordion_section title=”Tutorial summary of Best CSS3 Properties You Might Have Missed”] In this guide, we told you about the Best CSS3 Properties You Might Have Missed; please read all steps so that you understand Best CSS3 Properties You Might Have Missed in case if you need any assistance from us, then contact us. [/wpsm_accordion_section] [wpsm_accordion_section title=”How this tutorial helping you?”] So in this guide, we discuss the Best CSS3 Properties You Might Have Missed, which undoubtedly helps you. [/wpsm_accordion_section] [wpsm_accordion_section title=”What is actual time in which this method complete?”] The time to complete the Best CSS3 Properties You Might Have Missed tutorial is 10+ minutes. [/wpsm_accordion_section] [wpsm_accordion_section title=”What are the supported Device?”] PC Laptop or Desktop [/wpsm_accordion_section] [/wpsm_accordion] [wpsm_divider top=”2px” bottom=”15px” style=”fadeout”]
Final note
I hope you like the guide Best CSS3 Properties You Might Have Missed. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the Best CSS3 Properties You Might Have Missed, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “Best CSS3 Properties You Might Have Missed”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide Best CSS3 Properties You Might Have Missed, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
