Chrome 24 was released a couple of days after Firefox 18. You probably didn’t notice the automated update but there are a number of interesting features for web developers…
Mathematical Markup Language is an XML schema which describes mathematical notations and formula. It produces results which are similar to Microsoft Office Equation Editor or the Math application in OpenOffice / LibreOffice.
Until MathML, you’d have required a graphic to produce an equation such as:
It can now be coded:
<math mode="display" xmlns="https://www.w3.org/1998/Math/MathML"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo form="prefix">−</mo> <mi>b</mi> <mo>±</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>−</mo> <mn>4</mn> <mo></mo> <mi>a</mi> <mo></mo> <mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mo></mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>
MathML is now available in Chrome, Safari, Firefox and has partial support in Opera. No sign of implementation in IE yet. I suspect SVG may be an easier cross-browser alternative for some time to come.
IndexedDB is a client-side data storage technology. While we already have key-value pairs in localStorage and sessionStorage, IndexedDB provides greater data structure and indexing support. It’s the approved successor to the Web SQL Database which never became an agreed W3C specification.
IndexedDB requires an article in itself, but the technology has become more viable now it’s supported in Chrome, Firefox and IE10. It’s likely to appear in Safari since, like Chrome, it uses the webkit engine. I’ve no doubt Opera are working on it. For more information, refer to the W3C IndexedDB Specification.
CSS Custom Filters
Custom Filters were suggested by Adobe and allow you to apply image or movie-like filter effects to any HTML content. Typical options include grayscale-to-color transitions, warping, animated shadows and more. In essence, it’s similar to SVG filters or Microsoft’s proprietary CSS filter property which was implemented in IE many, many years ago.
Chrome’s implementation is experimental, requires webkit prefixes and must be enabled in about:flags — see Enable CSS Shaders about two-thirds of way down. It looks exciting but don’t expect a reliable technology for year or two yet.
Chrome’s Developer Tools Console now supports styled logging using a syntax which is identical to that implemented in Firefox’s Firebug add-on. For example:
console.log("%cBlue text!", "color:blue;");
You can apply any CSS styles to highlight errors or other conditions.
Chrome has always been fast, but the latest edition is faster than ever. In particular, Google claim better start-up times and report an overall improvement of more than 26% over the last year.
If you don’t believe them, try the new performance tab — chrome://performance/. You’ll need to enable performance monitoring in about:flags first.
Numerous Bug Fixes
More than 20 bugs have been squished in Chrome 24. In addition, $6,000 has been paid to developers who found high-severity vulnerabilities.
Chrome’s speed, stability and standards support has made it the browser to beat. It’s great to see that Google and the Webkit team have not become complacent. Long may it continue.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.