Skip to main content

Posts

Showing posts from 2014

8 HTML Elements You’re Not Using (and Should Be)

In today's web, the word  semantic  gets thrown around a lot. But what does semantic mean? Why is it important? Semantic HTML expresses the  meaning  of the document. It's less about how the text looks and more about what it is. Good semantic markup helps both people and machines understand the content and its context. Semantic markup is much more accessible and easier for screen readers to interpret. It's SEO friendly. It works better with modern browsers. It reduces the amount of code needed to express the content and increases the clarity of the code for other people that have to read it. Okay, so semantic content is great, but how do you use it? One of the best ways to start writing better markup is to replace generic tags with more expressive elements. Let's take a look at eight that you can use to step up your game. <q> Like it's blockier cousin  <blockquote> , the  <q>  tag is used for quoted text. Why not just use quotation ma

5 Ways that CSS and JavaScript Interact That You May Not Know About

CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but that doesn't mean that CSS and JS can't interact more closely than the basic JavaScript frameworks will allow.  Here are five ways that JavaScript and CSS work together that you may not know about! Get Pseudo-Element Properties with JavaScript We know that we can get basic CSS style values for an element with the  style  property, but what about pseudo-element properties?  Yes, JavaScript can even access those too! // Get the color value of .element:before var color = window . getComputedStyle ( document . querySelector ( '.element' ) , ':before' ) . getPropertyValue ( 'color' ) ; // Get the content value of .element:before var content = window . getComputedStyle ( document . querySelect