CSS Agent Basic Usage Example

The CSS Agent grants you the ability to write complex inline styling. In this example we are going to use the default settings of the CSS Agent to write different inline styling rules for different viewports.

The Source Code

<script type="text/javascript">
        CSSAgent.start();
</script>
<style type="text/css">
        .red-box {
                background: red;
                height: 200px;
                margin: 20px 0;
        }
</style>
<div class="red-box" data-ca-above-md="background: yellow;">
        This box is yellow on laptop and desktop viewports, red otherwise
</div>
<div class="red-box" data-ca-xs="background: yellow;">
        This box is red on laptop, desktop and tablet viewports, yellow on mobile
</div>
<div class="red-box" data-ca-xs-hover="background: yellow;">
        This box is yellow <b>on hover</b> on mobile viewport, red otherwise
</div>

The Result

This box is yellow on laptop and desktop viewports, red otherwise

This box is red on laptop, desktop and tablet viewports, yellow on mobile

This box is yellow on hover on mobile viewport, red otherwise

Conclusions & Notes

You may resize the browser window in order to view the different media query reactions.