Jasmine Web Starter

Its easy to sit back with the knowledge that you have a great working website and think you don't need to do anything else to it...

Now don't get us wrong we understand only too well how easy it is to get caught up in the everyday, weekly or monthly business tasks, and after all if its not broken why fix it, right.

But continually enhancing your website with even the smallest of code changes can have a big impact, especially when they can provide instant visual improvements or enhance accessibility for users. Now that may sound too good to be true but it helps when the major browsers are continually updating and adopting new features that make this possible. Like the latest CSS text-wrap properties Balance & Pretty, helping us to have beautifully balanced and flowing text. Or the CSS light-dark colour function making it easier to provide light and dark colour options to elements in line with a users preferences.

So lets have a closer look at each of them and how you can start using them today, though as always we would advise thoroughly checking & testing that any new code changes won't cause any issues before implementing them on your live site. Oh and for those budding developers & designers reading this, we think these would be great features to start adding to your CSS reset or starter for future website creations too.

Creating Balance

Almost all websites contain some element of text along with a combination of headings, and how well these flow down the page can make quite an impactful difference. The trouble with designing a website these days is the growing number of devices and screen sizes your website can be viewed on. This is where the text-wrap: wrap (the default value) property helps, by prompting how the browser controls the soft line breaks in your text, wrapping lines at appropriate characters creating more balanced line lengths and minimizing overflow. Which to be fair works quite well but text-wrap has a couple of other values too which may take your text & headings to the next level.

text-wrap:balance

Wraps text by calculating the best balance for the number of characters on each line, to enhance the layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive (meaning it can take longer to work out), its only supported for blocks of text that span a limited number of lines (according to MDN this is currently six or less for Chromium and ten or less for Firefox).

Bearing in mind this line limitation, it makes text-wrap:balance more suited to controlling headings rather than lengthy paragraphs of text.

text-wrap:pretty

Behaves in the same way as the value wrap does. But it seems to have a more thoughtful approach when it comes to typography and makes better layout decisions. Such as keeping pesky orphans (those single worded last lines in a paragraph) to a minimum. The only apparent drawback to using pretty rather than wrap is that its calculated using a slower algorithm that favors layout over speed, but from what we've read the performance difference seems very minimal and not really something to worry over.

This makes text-wrap:pretty the ideal option for body copy. Unfortunately it does currently have one other little issue, as so far neither Safari nor Firefox are supporting it but with any luck they will catch up with all the other browsers soon, and in the meantime you can always provide the fallback of wrap for those users.

Switching to the darkside

Now we've briefly touched on the subject of dark mode in our JWS Docs section with the styling/variables page. Where it shows how to set multiple colour schemes for your website in the :root of our CSS within a @media (prefers-color-scheme: dark) query.

Which all works great, but can potentially add an awful lot of extra lines of code to your CSS file depending on the number of colour variables you have set for your design. Luckily this can now be reduced with the light-dark() color function.

light-dark() color function

Using this function means we no longer need to set out a separate @media (prefers-color-scheme: dark) as the light-dark() color function accepts the setting of two colors for a property, one of which is then picked depending on the chosen color scheme. It does this by detecting if the developer has set a light or dark color scheme or whether the user has requested a light or dark color theme then returns one of the two colour options inline with that request.

:root {
color-scheme: (light dark);

/* Named color values */
background-color: light-dark(white, black);

/* RGB color values */
background-color: light-dark(rgb(255 255 255), rgb(0 0 0)rgb(255 255 255));

/* Custom properties */
background-color: light-dark(var(--dark), var(--light));
}

We're sure you'll agree with us that the potential savings on your CSS file size will be a bonus, plus it should make changing colour schemes in the future easier having both colours for a property or variable all together in one place.

As always should you have any questions or want more details on any of the areas covered, feel free to reach out to us via our Contact form.