Featured and Innovative CSS Techniques

When talking about techniques to enhance interactivity in the front-end of websites, not all efforts rest upon JavaScript. The mere reason being the non-salient yet impressive features of Cascading Style Sheets(CSS). Instead in actual, CSS has much more capability of making the web pages interactive than what is generally harnessed from it by designers out there! Also, there exist a number of operations which are commonly dominated by the use of JavaScript, but can rather be cracked with some advanced CSS3 techniques. I’ve curated this list of such CSS properties which involve manipulating the font styles and font selections to deliver a richer user interface and user experience without bothering with JavaScript!

Customize Your Scrollbars

Being a browser's default entity, the dull scrollbar is one of the rarest things that gets customized for websites. This customization feature exists, though not impeccably. ::-webkit-scrollbar CSS pseudo-element lets you style the entire page's or a specific element's scrollbar, but only works for WebKit-based browsers, i.e. Apple's Safari, Google Chrome, Opera browsers, and few others. The underlying constraint is that it's not a standard CSS property and is not compliant with the specs of W3Consortium. Remember to use the double colons syntax! The extended scrollbar properties available are:

• ::-webkit-scrollbar-button: Acting on the up & down arrow buttons.

• ::-webkit-scrollbar-thumb: Acting on the draggable scroller bar.

• ::-webkit-scrollbar-track: Acting on the navigation track.

• ::-webkit-scrollbar-track-piece: Acting on the portion of the navigation track not occupied by the thumb.

• ::-webkit-scrollbar-corner: Acting on the corner intersection at which the vertical and horizontal scrollbars meet.

• ::-webkit-resizer:  Acting on the draggable handle appearing in some cases to modify the content area size.

Custom Scrollbar for Firefox & IE

As mentioned, the above technique only works for WebKit-powered browsers. Then what about others like the commendable Mozilla Firefox & the execrable (for designers and users alike) Internet Explorer? Unfortunately, there's no ::-webkit-scrollbar equivalent for Firefox & IE! You should stick with JavaScript/jQuery-based scripts for things to work out for them. However, there's a clever and devious CSS technique to alter the appearance of the scrollbar to make it blend with the background. You'll require two containers: The outer one set to the complete page width, and the inner one marginally away from the right edge to make the scrollbar freestanding. The inner one contains all the content as well as some divs to hide outer edges of the browser's default scrollbar and to round its top and bottom edges. Further, the inner one is pushed up, over the edge of the outer div having overflow hidden. This hides away the upper arrow of the scrollbar. Also, the effective visible height of the inner div is so co-ordinated with that of the outer one so that its overflowed lower edge containing the lower scrollbar arrow is hidden. Of course, there are limitations with this like you won't be able to modify things like the scrollbar thumb and track. Open the demo on Codepen & manipulate it to see the effects.

Customized Text Selection

Custom text selection is a smart technique to promote your website's theme color. Unfortunately, the CSS pseudo-element for this, ::selection was removed during the Candidate Recommendation phase from the W3C's CSS Selectors(level-3). So, it remains as a non-standard pseudo-element. Despite this, owing to its popularity, it has gained appreciable browser support. For the Gecko-based Firefox, the -moz prefix is required. However, the future of this pseudo-element remains unpredictable. Double colons are required for this pseudo-element. Only a few properties including color, background-color, and text-shadow will work with this pseudo-element.

Text with Drop Cap

One can do awesome things with the combination of Pseudo-classes & Pseudo-elements! One such distinct utility is creating Drop Caps. Drop Caps are seldom used within the sphere of the web. Though they can be great for news websites or stories/articles based blogs. Using the ::first-letter pseudo-element, the first letter inside an HTML tag is targeted for an increase in size. Further, using the p:first-child syntax, it is ensured that only the first occurrence of the selector (paragraph in this case) is acted upon. Similarly, using the ::first-line pseudo-element, the first line of any text can be formatted.

CSS Content Property

Having a reliably common browser compatibility, content is an estimable CSS property executing a groundbreaking function primarily thought of to be that of JavaScript. Used with ::before and ::after pseudo-elements, it inserts CSS generated content in instances where actual elements can't be included. Such virtual content does not form a part of the Document Object Model (DOM). Since only the content associated with the document tree can be selected, text added by CSS can't be selected, as is the case with list item identifiers and counters.

CSS Counters

CSS ordered lists are one amongst the widely-used methods for numbering items, but the process requires manual adding of li HTML tags. Also, there are cases when using ordered lists seem inappropriate, like when numbering headings and subheadings. CSS counter technique is the best alternative solution for these scenarios as it automatically numbers the selector tags. counter-reset and counter-increment are two nitty-gritty CSS properties which like many others in CSS2, and even in CSS1, can be quite useful, but have not drawn the deserved prominence. The content is generated with the content CSS property and the numbering criteria can even be modified, such as numbering with Roman numerals, custom counter-increment value and custom counter-reset value. Browse W3villa's Codepen collection on CSS Counters for these demos.

Background-Clip: Text

The CSS property background-clip is not in the W3C's REC (Recommended or Standards) phase yet and is in CR (Candidate Recommendation) phase. The conventional values considered for this property were border-box, padding-box, and content-box sequentially in decreasing scope of the background color/image, however, a new value was introduced: text having the background scope confined to just the foreground-text. The feature indeed bestows an authentic effect to the text. This addition is currently in the ED(Editor's Draft) phase and requires a -webkit- prefix for the WebKit browsers as well as Microsoft Edge, though Firefox supports both -webkit- prefixed and non-prefixed syntax.

Box-Decoration-Break Property

That's another lesser-known experimental technology in CSS, therefore remember to use the -webkit- prefix for compatibility with WebKit-based browsers. However, there's no support for Internet Explorer and even Microsoft Edge. Furthermore, not all browsers extend its compatibility for non-inline elements and with page or column breaks. It presently lies in the CR phase of W3C's long standardization process. It has the following two distinct values:

• clone: Specifies that each fragment of the element separately receives the styling like background, padding, border, box-shadow, margin and clip when it's wrapped into multiple lines.

• slice: The default one specifying that the styling like background, padding, border, box-shadow, margin, and clip are not received separately by each fragment of the element across the line, column or page breaks.

Emmett

Emmett is a tool which makes the front-end coding work quick and non-tedious. It works as a plugin, available for most source editors like Sublime Text and Atom, to simplify things up while writing markup. Also, in case you don't prefer to use HTML or CSS preprocessors or there's a technical constraint to their use, you may consider using Emmett for the sake of shorthand coding!
Ponder over the following Emmett syntax:
div#list>div.mylogo+ul#items>li*4>a{Product $}
Which converts into:

<div id="list">
    <div class="mylogo"></div>
    <ul id="items">
        <li><a href="">Product 1</a></li>
        <li><a href="">Product 2</a></li>
        <li><a href="">Product 3</a></li>
        <li><a href="">Product 4</a></li>
    </ul>
</div>

For more details and an animated illustration of this tool, visit our recent blog on Sublime plugins.

Wrapping Text Around a Floated Element in a Shape

The shape-outside property lets you design an astounding flow of content within the webpage. Coupled with the float property, shape-outside uses certain functions and values to generate a figure which is used to hold away the surrounding text from the image or region in focus. The property is awaiting implementation in W3C's CSS Shapes Level 2. The values margin-box(default), padding-box and border-box indicate the positioning of the deflecting edge with respect to the shape's box model. The shape of the deflecting edge is determined by the following distinct functions:

• circle(): Prompts circular shape.

• ellipse(): Prompts elliptical shape.

• inset(): Prompts rectangular shape, though we can round the corners through border-radius.

• polygon(): Prompts polygonal shape using paired parameters.

• url(): Prompts shape to trace an image's contour.

The modifiable demos displayed above employ plain HTML & CSS examples, with their latest standards, HTML5 & CSS3 respectively, without using HTML preprocessors like Jade(Pug) or Slim, CSS preprocessors like Stylus or Sass, and front-end frameworks like Bootstrap or Materialize. This ensures that these techniques are reliably portable and supported across various platforms. As such, it is recommended to use them, where applicable, instead of those scripts which might add to the page size, loading time and deal with browser compatibility/loading issues. Furthermore, your JavaScript-rendered content may also be too arcane for most search engines to crawl, thereby inhibiting your website's search engine performance!