We have made improvements in how our editor creates font styling in compliance with CSS best practices.
With our editor styles changing from inline CSS to class names, we are making maintenance easier and your HTML more accessible.
From the control panel users can:
- change default styles en masse.
- create responsive custom styles that change the look and feel of their site no matter the device used to view it.
- optimize performance by creating smaller page sizes.
- clean up your HTML code, making your content more accessible by search engines and text reader assistive technology.
The separation of design from content (HTML) allows developers to implement design choices quickly without having to go through every page to find and change each inline style. As web design practices change over time, it is important to stay nimble, current, and optimized.
Previously, font styles were handled with inline CSS:
With our implemented changes, the editor searches for similar inline CSS and replaces it with a class:
<span class="mt-color-800000" data-mt-color="1">Text</span>
In this example, we are implementing the class names listed below. Keep in mind that this is not a complete list of classes.
|mt-font-size-#||Replace # with a number to change the text font size.|
|mt-font-XXXX||Replace XXXX with a desired font style. For example, mt-font-times-new-roman changes the font to times new roman.|
|mt-color-#||Replace # with a hex color code to change the color of the text.|
|mt-bgcolor-#||Replace # with a hex color code to change the background of the text.|
Below is a view of the editor in Source mode. At the bottom of the image is an example of how these classes can be used.
Returning to View mode, the phrase "TEXT CONTENT" now displays a new style.