HTML5 elements in Internet Explorer without Javascript - de Betere Vormgever
When using HTML5 for your website, you'll soon notice that Internet Explorer refuses to acknowledge, and subsequently style, all those newfangled HTML5 elements. They simply collapse into nothingness, as if they never existed in the first place. Depending on how complicated your markup is and how many HTML5 elements you've used, this makes your website full of semantic hotness pretty much look lik
Desarrollo de Sitios Web – Paginas Web, Sitios, Gr�fica y todo lo relacionado al Marketing Online
Desarrollo de Sitios Web Paginas Web, Sitios, Gr�fica y todo lo relacionado al Marketing Online Acampar es una de las cosas que m�s relaja y nos hace estar en paz con nosotros mismos y con nuestro externo, y es que la naturaleza nos regala paz y tranquilidad cuando solo al observamos o cuando la exploramos…. Seguir leyendo →
当社Webサイトのリニューアルについて | コラム | ミツエーリンクス
既にお知らせ「当社Webサイトをリニューアル」にありますように、先月23日、当社ミツエーリンクスの企業サイト（www.mitsue.co.jp、以下「当サイト」）をリニューアルしました。それまで、私が入社した2004年2月時点での情報構造やビジュアルデザインを維持してきましたから、少なく見積もっても8年以上ぶりのリニューアルになります。その間、Webの閲覧環境はもとより、デザインのトレンドや実装技術は大きく変化してきました。 2004年4月に当サイトのWeb標準準拠を実施し（コラム「Web標準に準拠する価値」参照）、以後も継続して運用に参加してきた立場ゆえ、早くリニューアルをしたいという思いは日常的に抱いていました。とりわけ自分の担当したマークアップ/スタイルシート設計について、「今の自分ならこうする」「最新の技術ならこう作れる」といった点は多く認識してきました。そうであればこそ、陳腐化し
Relevant Dropdowns: Polyfill For Datalist | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The list attribute / datalist element of HTML5 forms is pretty cool. As you type in a text input, it shows you a dropdown menu of choices you can pick from. Or you can type in whatever you want. The list attribute alone doesn’t lock you into any specific value. In that way, it’s a bit like a
HTML5の要素を条件付きコメントなしでIEで使う - 徒書
今更ながら、ここもHTML5にしてみようかなという気持ちが湧いてきています。以前は、一旦公開した文書の形式を無闇に変えるのはよくないという思いが強かったのですが、個人のページなのだし色々と実験的なことをもっと試してもいいのでは、と思うようになったので。 さて、HTML5導入にあたり一番気にしていたのが、IEでHTML5の新しい要素を使う方法のことでした。今だと html5shiv を使って以下のようなコメントを入れるのが一般的になっているようです。 <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> しかしながら、HTML文書というのは様々な環境で利用されるための文書形式だと自分は考えているので、その中に(コメントとは言え)特定のブラウザのた
Polyfilling The HTML5 Gaps With JavaScript
Related links and resources Tweet A little about me JavaScript & UI Developer @ AOL jQuery [Bug Triage/Docs/Learning] teams Contribute to open source projects like Modernizr Wrote a few polyfills and shims I ♥ making the web better I occasionally battle the dark side. Why Do Polyfills Matter? First do it. Then do it right. Then do it better. Do it: Get your application or demo working using the na
html5shim vs html5shiv - MOL
JavaScript Advent Calendar 2011 (オレ標準コース) 12 日目の id:t32k です。去年も参加しましたがなんでもありと聞いて今年も懲りずに参加！ はじめに言っておきますが、html5shim も html5shiv どっちもまったく同じです。違いなんて無いので、こんなことに頭を悩ませる暇があったらさっさとコードでも書いてろ！以上！うんこ(・∀・)! そんなこと言っても世の中結果じゃない、過程が大切だと思うんだ先生！ってことで今回は調べてみます。 html5shi(m|v)、めんどくさいので以下 html5.js は”HTML5 IE enabling script”の名の通り、IE8 以下でarticleなどの新要素が正しく認識されずスタイル(CSS)がうまく適用されない問題を解決しそれらのブラウザでも利用可能にしてくれます。 document.crea
サブセクションにあるh1要素のフォントサイズ
全然知らなかったのですが、Chrome 15やFirefox 8ではベンダー拡張プリフィックス付きの:any擬似クラスを使ってサブセクションのh1要素のフォントサイズを調節するようになっているようです。Internet Explorer 9も見た感じそうなっているようですが、UAスタイルシートによるものなのかよくわかりません……。なんか変なことやってそう(偏見)。 Chrome 15の場合は、 h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67__qem; -webkit-margin-after: 0.67em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold } :-webkit-any(article,aside,nav,s
Dive Into HTML5した
ダイブ・イン！ 60%くらい。「結局どうすればいいの？」を参考にしました。@hail2u_さん、ありがとうございます。id属性とかclass属性が減って気持ちいいですね！ 別にサイズは減りませんし、むしろ増えてますけどね！ フッターはfooter要素でもちろん良いですが、よくあるソーシャルメディアへのリンクをnav要素で括ったりしないように気をつけましょう。サイトのナビゲーションじゃないですしね。aside要素だとfooter要素の中によくあるページ製作者情報との関連が薄れると思うので、section要素が妥当なんじゃないかと。メガメニュー系でTwitterでのつぶやきを取り込んで表示するなどという場合はaside要素の方が良いと思います。 検索フォームはnav要素が良さそうです。 <nav> <ul> <li> <form ...> <div> <input type="search"
Don’t Style Headings Using HTML5 Sections – Nicole Sullivan
Styling headings is either a deceptively complex problem, or maybe the design of CSS made it appear complex when it need not have done. When styling headings (or really anything) we want three big goals to be met: DRY – Do not repeat yourself. We want to set headings once and never (ok, rarely!) repeat those font styles or selectors. This will make our site easier to maintain. Predictable – The he
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ | ゆっくりと…
前の記事「HTML5でモダンブラウザのCSS3バグを回避するためのハック方法」に関連して、jQuery で HTML5 データ属性にユーザーエジェント文字列を格納する方法を調べていました。その結果、ちょっと整理をしておいた方が良いかなと思う点を共有したいと思います。 ご存知の方も多いと思いますが、jQuery には .data() や jQuery.data() という、DOM 要素に データ を紐付けて記憶しておく仕組みが元々ありました。jQuery 1.4.3 からは、 API レベルでの 親和性 が考慮された形で HTML5 data-* 属性を取り込む仕様が導入されました。 HTML5 時代では、クライアント・サイドで実行されるコード量も増え、データ属性を扱う機会もちょくちょく出てくるのではないでしょうか。そこで今回は、 HTML5 data-* 属性のおさらい jQuery Da
Using jQuery’s Data APIs | Learning jQuery
Tips, techniques, and tutorials for the jQuery JavaScript library In the beginning (well, beginning with jQuery 1.2.3 in early 2008) there was the jQuery.data() API. It offers a way to associate JavaScript data — strings, numbers, or any object — with a DOM element. As long as you manipulate the DOM element with jQuery, the library ensures that when the DOM element goes away, the associated data g
$.dataはHTML5 datasetのラッパーではない
$.dataはHTML5のdatasetラッパーでない HTML5では要素に任意の属性を追加出来るdata-*属性がサポートされました。仕様では <div data-foo="bar">...</div> data-fooの値はdiv.dataset.fooでアクセスすることが出来ます。ただしdatasetは現在一部ブラウザでしかサポートされていない。。そこでjQueryに存在する$.dataメソッドを使いましょう、という流れなのですが、$.dataをラッパーとして見た場合結構罠がありおすすめ出来ません。中途半端に対応してしまったために誤解されがちですが、$.dataはdatasetのラッパーではありません。 属性値がJSONとして解釈出来る場合、パースして返す <div id="test1" data-json="{"foo":"bar"}">...</div> $('#foo').da
Extending HTML5 — Microdata | HTML5 Doctor
For those who like (to argue about) semantics, HTML5 is fantastic. Old presentational elements now have new semantic meanings, there’s a slew of new semantic elements for us to argue about, and we've even in<cite>d a riot or two. But that's not all! Also in HTML5 is microdata, a new lightweight semantic meta-syntax. Using attributes, we can define nestable groups of name-value pairs of data, calle
Avoiding common HTML5 mistakes | HTML5 Doctor
Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them. Don’t use section as a wrapper for styling One of the most common problems I see in people’s markup is the arbitrary replacem
Google Code: Web Authoring Statistics: Classes
The rest of the top 20 classes are either presentational or otherwise meaningless (msonormal, for example, which is one of the classes that Microsoft Office uses in its "HTML" output). Of the top 20, the two classes that are used the most that are currently not covered by HTML5 are copyright and search. The button class is apparently used to target input elements in CSS, because IE6 doesn't suppor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Add the <main>-Element to Modernizr 2.6.2 | Blog | Hans Reinl
Rigor | Splunk
Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens
Creating multiple pages with navigation menus - W3C Wiki