Archive results for:

WordPress Tip: Templating Posts vs Pages

Posts and pages have a lot in common, and although most themes will have separate templates for these, they rarely differ all that much.

First of all, as with every template that deals with the things between the header and footer, you need to include said header and footer. This is done with the get_header() and get_footer() template tags. Read more ›

What is Semantics?

Semantics in front-end development concerns whether to use a div or a header, or if some text should be a paragraph or a heading, or whether a list is to be ordered or unordered, and so on. It’s about elements and not attributes.

It’s about machines (screen readers, browsers, assistive technologies, bots) gleaning meaning from the elements we use to mark up our documents. Read more ›

CSS Inheritance

People often confuse inheritance with the cascade. Although they seem related at first glance, the  two concepts are actually quite different. Luckily, inheritance is a much easier concept to grasp.

Certain properties, such as color or font size, are inherited by the descendants of the elements those styles are applied to. For instance, if you were to give the body element a text color of  black, all the descendants of the body element would also have black text. The same would be  true of font sizes.


Read more ›

CSS Cascade and Specificity

Ever wonder why they are called “cascading” style sheets? CSS allows you to apply several style sheets to the same document, which means there are bound to be conflicts. CSS handles such conflicts through a process known as the cascade.

The cascade refers to what happens when several sources of style information vie for control of the elements on a page: style information is passed down (“cascades” down) until it is overridden by a style command with more weight. Read more ›

Flexible Media

Images are not naturally fluid: they remain the same size and orientation at all configurations of the viewport, and will be cropped if they become too large for their container.

This creates a conundrum when displaying images in a mobile browser: because they remain at their native size, images may be cut off or displayed out-of-scale compared to the surrounding text content as the browser narrows.

One way around this is to size images in relative units, rather than absolute pixel dimensions. The most common relative solution is to set the max-width of the image at 100%:

IE 11 New Dev Tool


IE11, available for Windows 7 and 8.x, offers a new set of developer tools. Some of the new features includes:

New DOM Inspector/style feature:

  • Improved highlighting of selected elements.
  • New breadcrumb navigation shows the DOM path to the current element, allowing rapid navigation up and down the path hierarchy.
  • You can now change the order of the DOM elements by dragging and dropping.
  • Trace is a new feature that provides a concise summary list of all the properties applied from your stylesheets.
  • The ability to filter computed styles.
  • A new Events panel that allows us to Inspect events attached to DOM elements.

Read more ›

Browser Development Tools

Browser developer tools allow us to inspect, edit, debug, log and profile our HTML, CSS and JavaScript, and include an exhaustive range of features and functionality.

You can improve your development workflow by getting to know how these tools work in every browser.

Chrome developer tools have had the fullest feature set for some time now. Each new release tends to add more new and exciting features such as workflows, snippets, canvas inspection and source-mapping support. Read more ›

Page 10 of 17« First...91011...Last »