Understanding the CSS Object Model

CSS has been evolving along with HTML5. An exciting feature of CSS3 is the CSS Object Model (CSSOM). It grew out of HTML’s Document Object Model (DOM). Just as DOM allows JavaScript to manipulate an abstract representation of an HTML document, CSSOM allows it to do the same with stylesheets. Web designers need to understand both CSSOM and DOM to produce the best pages possible.

The World Wide Web Consortium (W3C) started working on an object model for stylesheets as part of DOM Level 2. In 2012 it broke out CSSOM as a separate specification. It recently advanced from Working Draft to Editor’s Draft status, so it’s still not final; but as with many documents from W3C, that isn’t stopping developers from implementing it. Many of its features have been around for a long time.

Continue reading Understanding the CSS Object Model

The Evolution of Text in CSS

 

Text formatting doesn’t look too complicated when you consider just English and other European languages, but in a connected world it’s become increasingly important to consider all languages, with their different character sets and typographic conventions. Work on CSS tries to keep up with this growing need. Work is still ongoing on the CSS Level 3 Text Module, with a new Editor’s Draft as of February 2016. Continue reading The Evolution of Text in CSS

Understanding the CSS Object Model

 

CSS has been evolving along with HTML5. An exciting feature of CSS3 is the CSS Object Model (CSSOM). It grew out of HTML’s Document Object Model (DOM). Just as DOM allows JavaScript to manipulate an abstract representation of an HTML document, CSSOM allows it to do the same with stylesheets. Web designers need to understand both CSSOM and DOM to produce the best pages possible.

Continue reading Understanding the CSS Object Model

CSS Improvements for Supporting International Writing Structures

Technology and the internet are now ingrained within society. For a vast part of the population, using the internet is a part of their regular routine. This ever-increasing user base means that businesses need to begin supporting an international audience. To remain competitive, companies are attempting to connect with other demographics. On the international scale, what is the most significant dividing factor separating one demographic from another? In nearly all cases, language is the largest barrier. In order to successfully communicate, some form of common ground has to be established. Imagine trying to sell a product to someone who speaks a different language than you do. There isn’t a solid starting point. For a company to effectively communicate to international demographics, it needs to make changes. You can’t expect someone to visit your website looking to buy a product, and have them try and translate the information on their own. It is the company’s responsibility to offer its content in as many languages as possible. While the act of translating to multiple languages is a daunting task itself, in the past there have been technological setbacks as well.

Continue reading CSS Improvements for Supporting International Writing Structures

Generate Color Specific Classes With LESS

Just a quick example of how to loop through a list of color definitions to generate classes for button images or similar.

 

The example uses for.less, which can be found here: https://github.com/seven-phases-max/less.curious/blob/master/src/for.less

 

LESS CSS In Visual Studio 2013

I’ve been using Web Essentials for a few weeks to compile LESS files into css. Web Essentials uses the node-less compiler and does a great job of updating the css anytime something is changed.

The issue I’ve been running into is with debugging. The sourcemap files don’t work in chrome, which means anytime you want to edit some styles you have to do a Control+F and search for the selector given in the generated css. This is tedious and very inefficient compared to having the line numbers available directly in chrome. Continue reading LESS CSS In Visual Studio 2013