Places It's Tempting To Use `display: None;`, But Don't | CSS-Tricks
Places it’s tempting to use `display: none;`, but don’t You want to hide something on a page, so: .hide { display: none; } But wait! By applying that class to an element you’ve immediately made that content “inaccessible” by screen readers. You’ve probably known this forever, but still, the poison apple sneaks into our code once in a while. I don’t want to re-hash all the specifics. Your best bet
Developing With Sass and Chrome DevTools | Envato Tuts+
In this article we'll take a look at how we can better integrate Chrome DevTools into our Sass development workflow. Tutorial Sneak Peek! Here's a peek of what we'll be doing in this tutorial via an animated GIF: On the left is a terminal and the Sublime text editor, and on the right is Chrome. Changes to the .scss file are being persisted to disk, which is reflected in Sublime, the Sass watch com
Introduction to DOM Events - DOM ECMAScripting
<body onclick="alert ('BODY');"> <div onclick="alert ('DIV');"> <p onclick="alert ('P');">バブルスライムはにげだした！</p> </div> </body> 「バブルスライムはにげだした！」をクリックすると、それは p 要素をクリックしたことになりますから「p」がアラートされます。さらに、このクリックは div 要素内で生じたものでもあるので「div」がアラートされます。さらにさらに、そのクリックは body 要素内で生じたものでもありますから「body」がアラートされます。結局、1 回のクリックで 3 個もの onclick 属性が呼び出されることになります。では、onclick 属性を呼び出す順番はどうなっているでしょうか。これは明確に決まっています。階層的に最も深い p 要素の onclick
Words
This is a web page. There's not much here. Just words. And you're reading them. We've become obsessed with fancy designs, responsive layouts, and scripts that do magical things. But the most powerful tool on the web is still words. I wrote these words, and you're reading them: that's magical. I'm in a little city in British Columbia; you're probably somewhere else. I wrote this early in the mornin
Web Fonts and the Critical Path
his blog corresponds to my May 2013 talk @frontendlondon. The slides for that talk can be found on slideshare. The story behind FOUTCSS is justified critical due to the flash of unstyled content which would ensue if we deferred it. This is the main reason why web fonts are deemed critical to web pages: to avoid the flash of unstyled text which is then later repainted. When font-face landed we had
HTML For Icon Font Usage | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Where are we at right now in terms of the best markup for using icon fonts? Let’s cover some options I think are currently the best. You want the icon to enhance a word You want the icon to stand alone but still be functional or informational And our major goals here are: As good of semantic
Juicy Studio: Screen Readers and display: none
Site Navigation Friday, 12th October 2007 Summary Jim Thatcher noticed some interesting behaviour whereby screen readers announced content in an anchor element that is hidden with display: none. Content hidden with display: none is not usually announced by screen readers, apart from labels for form controls, regardless of the verbosity settings. Looking into it further, there are certain circumsta
Hiding Content for Accessibility
For years now, we've used a number of techniques for hiding content offscreen for accessibility purposes. We do this because the content is still accessible to screenreaders while being removed from the interface for sighted users. An article over at Adaptive Themes reviews a number of techniques for hiding content that were considered for inclusion on a Drupal 7 project (but certainly applicable
フォームコントロール向けの CSS プロパティの互換性一覧表 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
フォームへの高度なスタイル設定 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — ウェブの構造化HTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化マルチメディアと埋め込みマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML 表HTML 表HTML の表の基本HTML 表の高度な機能とア
ウェブフォームへのスタイル設定 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The best way to use icon fonts · Eric Eggert