In a blog post last month, I shared a little information about CSS Regions and CSS Custom Filters, two tools I believe will help developers ease the tension between functionality and design on the web without overly complicating code.
Here, I’ll share three more promising and exciting tools in the world of HTML and CSS: CSS Exclusions, CSS Composting and CSS Transforms.
One of the most common techniques in print design is to control text as it fits and flows around different elements or assets in the given design. While this is a standard practice and relatively simple to execute in InDesign, transferring the same design to a web page is far more complicated. CSS Exclusions is meant to solve this problem and allow simple text-wrap and declaratively define how text flows around shapes in CSS or extracted from the content itself.
Learn more about CSS Exclusions at these sources:
Another common design technique is to overlay or blend multiple layers with InDesign or Photoshop to create graphic design with more depth. Unfortunately, without a script or plugin, web developers typically have to resort to slicing out each image as a PNG and then add them to their own div id or class and manipulate where they show up to match the design and then play with the opacity. There are different ways to try to achieve this, granted, but without adding some special feature, there is just no great way to blend images, let alone entire elements, with standard code. In addition, PNGs are larger than JPG or GIF images, which means increased load time.
Adobe hopes to rectify all of this by adding the parameter “Blend-mode” to simple CSS. The idea is when Blend-mode is applied, it interacts with every rendered element behind the element on which the blending mode is specified. But the really cool thing about CSS Blend-mode is that you can add it not only to simple HTML elements, but also to SVG content, video or elements with CSS animations or transitions!
Learn more about CSS Composting at these sources:
Whether your markup includes HTML, CSS or SVG, having a single stylesheet to control all of your presentational content is ideal. CSS Transforms aims to make that a reality by making your transitions and/or animations in 2D or 3D space easily controlled by simple CSS, irrespective of whether it is SVG or HTML.
Learn more about CSS Transforms at these sources:
The answer for newer and better web development clearly resides in the expansion and continuing support for HTML and CSS. The code language is more accessible, and, because it is dependent on web browser support, this helps set a more identifiable web standard with which we can all operate from while expanding our design and integration capabilities. Focusing on expanding HTML/CSS with matching browser support will also help to reduce the mess (looking at you, Microsoft) of script libraries, plugins, modules and other custom code web developers have to wade through today for something as simple as a transition or a design-heavy layout.
Developers, together, we can continue to encourage a new web. So take the time to dig through more of what Adobe is doing and share your discoveries with peers.
What new web development tools have you found? Share your impressions in the comment section below!
Photo Credit: Stitch
Jesse is a Web Developer at Kuno Creative who regularly contributes his technical expertise to Kuno's blog. He carries a Master of Science in Mass Communcations and has more than three years of experience in web development and design.