Powerful CSS
I’ve been working with a good bit of CSS recently, customizing the Cireson Portal to look quite a bit different than the OOB experience. Some CSS properties are fairly standard, but others are not well-known, or known at all. I’ve picked a few interesting ones to demonstrate just how useful they can be.
:before and :after
These two pseudo-elements allow you to enter text on the web page through CSS. The next will appear either before or after the desired element(s). This might come in handy if you’d like to add text to all types of elements on a page. For example, in the image below, a “>” character is added to the nav bar buttons to denote which buttons have a pop-out pane.
First-of-type, n-th-of-type, last-of-type
These selectors allow you to target specific elements to apply a style to. They can be used with list elements, or any random element that appears on a page. They can also be used with other pseudo-elements, like :before and :after. In the screenshot below, universal “Instructions” are added to every request offering by targeting the last header in the form.
The last CSS property deals with page resizing. Sometimes, your page looks great on a high resolution monitor. But what happens if your page is viewed on a lower resolution monitor, or a mobile device? CSS allows you to easily set constraints for your elements based on resolution.
@media
You can use the @media query to determine the screen size and apply styles accordingly. We’ll use it like a an IF statement in this next example. If you need to change your layout when the screen becomes less than 908 pixels in width, then you can do the following.
Armed with tricks like these, you can coerce just about any page into looking how you’d like, using only CSS.
