|
|
|
|
Issue #83 (iframe attributes, CSS/HTML, Frameworks)02/19/15
The HTML5 spec has added 3 new attributes to HTML's iframe element. Here's a quick summary of them:
The sandbox attribute
This attribute takes values like allow-same-origin, allow-forms, allow-popups, etc. The value can be one or more space-separated values, which specify the features you don't want to be restricted. You can also specify no value, which will just enable all restrictions on the iframe's content.
The seamless attribute
This attribute tells the browser to make the iframe appear and act as if it is part of the parent document. So, for example, CSS that's applied to the parent would also apply to the iframe. Also, when links are clicked in the iframe, they would open in the parent window, not the iframe.
The srcdoc attribute
This is meant to be used alongside one of the previous attributes. The srcdoc attribute takes a URL as a value, pointing to a page, the same as the commonly-used src attribute for iframes. If the browser supports srcdoc, this value will override the src attribute. If the browser doesn't support srcdoc, the browser will use the src attribute (which would also have to be present). This is useful because you may want to specify different URLs for the iframe's source content, depending on if the browser can support sandboxed or seamless iframes.
As for desktop browser support? According to MDN:
- sandbox: Every browser including IE10+
- seamless: No support except Safari, which, according to Can I Use, has very buggy support.
- srcdoc: Every browser except IE.
More info in W3C's HTML5.1 spec:
Now on to this week's tools!
CSS and HTML Tools
CSS Selector
A Mac app. "Eliminates manual mapping of CSS selectors for your HTML code and speeds up web coding process."
Transformicons
"Animated icons, symbols and buttons using SVG and CSS."
object-fit
"Polyfill for CSS object-fit property to fill-in/fit-in images into containers."
CSS Buddy
"A Sketch 3 plugin that allows you to use CSS on layers."
MailChimp Pattern Library
The MailChimp team releases its internal pattern library for UI elements.
Hover.css
Now at v2. "A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on."
PubCSS
"A library of CSS stylesheets and HTML templates for formatting academic publications for print and the web."
html-janitor
"Sanitises HTML. Uses UMD for support in AMD and Common JS environments."
Griderator
"A simple CSS grid generator for Node.js. Generates CSS to a file, to a string or to a JavaScript array."
CSS UNCUT
The entire CSS spec in a single file full of single-purpose classes. Warning: the CSS file is ~585K, in case you consider opening it.
CSS Sprite Maker
"A freeware Windows application that combines different images into a single image for use in modern web design and generates relevant CSS."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
Text Editors and Code Playgrounds
CODECAST
"The simplest HTML and CSS editor in your browser with instant previews, for those teaching and learning how to code via screencasts."
CodeOnMobile
"A coding tool on mobile devices targeting GitHub/Codeship/Heroku."
CodePad
"A free Phone Interview tool. Quickly test applicant skill sets online. Pair program with your candidate and run code with your candidate, real-time in the browser."
cobalt2
"Tweaked and refined Sublime Text theme based on the original cobalt."
CotEditor
"The plain-text editor for OS X." Lots of nice features including split view, unicode character inspection, and ability to write Macros.
Macaw
"Provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS."
Front-end Frameworks
Materialize
"A modern responsive front-end framework based on Material Design."
Kickstart
"The CSS framework that loves to be extended. Faster and lighter than Bootstrap. Optimized for developer happiness."
Aurelia
"A next generation JavaScript client framework that leverages simple conventions to empower your creativity."
qooxdoo
Now at v4.1 "A universal JavaScript framework with a coherent set of individual components."
drgid
"A next-generation grid component that takes full advantage of modern browsers and object stores."
Centurion
"A web-based framework for rapid prototyping and provides a core for building larger web projects."
Golden Grid System
"A folding grid for responsive design. Four features: Columns, gutters, a baseline and a script."
| Support Web Tools Weekly: 384 pages of CSS for $7 |
A Tweet for Thought
The incorrigible Visual Idiot shows us what he thinks of parallax websites. Can't argue with that.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Addy Osmani has put together a GitHub repo collecting ES6-related tools, including transpilers, build tasks, plugins, polyfills, and more.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
