tom giannattasio @attasi photon on toggle photon off
tom giannattasio @attasi photon on toggle photon off
HTMLファイ部のほんだです。 気づきTips! Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
@nksm さんのつぶやき IE7+で透過pngに対してopacityを指定した時の汚さはなんとかならんかな。IE6はキレイなんだが・・・。 via http://twitter.com/nksm/status/16611637369 を見つけたので、VMLを使って透過pngにopacityを適用する方法を jsdo.it にあげました。 http://jsdo.it/uupaa/IEAlphaPng_x_Opacity 解説 知識として IE6〜IE8では、filter: AlphaImageLoader(src="**.png") で透過png画像を利用できる IE6〜IE8では、filter: alpha(opacity=0〜100)で 画像の不透明度(opacity)を指定できる filter: は一度にひとつではなく、複数指定できる があり、これを踏まえて filter: alp
とあるWebページのbody内に、次のJavaScriptコードが埋め込んでありました。 <script> document.body.className += ' js'; </script> これは何だろう? と思ったのですが、CSSスタイルシートのほうに、次の記述がありました。 body.js .section-tabs .tab { display:none; } JavaScriptが動く環境では、"js" というクラス名が設定されるので、それを使ってJavaScriptのあるなしを判断しスタイルを変えているようです。あー、なるほどね。CSSを使っている人には常識なのかもしれませんが、僕はnoscriptしか知りませんでした。
Webアプリの見た目を少しだけ変えたくてCSSをいじり、面倒なのでそのまま本番サーバにアップしたらレイアウトが激しく崩れてしまった・・・という経験がある人もいるかと思います。そんなときにこのツールがあればファイルを心ゆくまでいじり倒すことができます。 開発用プロキシ「CocProxy」 http://coderepos.org/share/wiki/CocProxy CocProxyの仕組みを簡単に述べると、ローカルにプロキシサーバを立てて、変更するファイルのみをローカルから取得し、その他のファイルは実際のサーバから取得するものです。 Rubyプログラムなので、まずWindows用のRuby環境を入手してください。Windowsバイナリはいくつか存在しますが、余計なものが入らないRuby-mswin32がおすすめです。 あとは適当なフォルダに proxy.rb をコピーして、その
A premium domain name exclusively for sale on the BrandBucket network. Dynamic Drive: A vibrant, forceful name that conveys motion and innovation, suggesting cutting-edge technology and forward-thinking solutions. Possible uses: A mobile app for car diagnostics. A tech platform for logistics. An adaptive learning software. Full ownership of domain dynamicdrive.com. Logo design source files and rig
HTMLやJavaScript、CSSを構造化して見やすく書こうと思うとインデントやスペースを使うだろう。確かに見やすいが、ブラウザへのレンダリングを行う上では特に意味はない(中には意味のあるスペースもあるが)。できるだけ転送量を抑えようと思うと、このスペースをなくしていくという作業が大事になる。 HTML/JavaScript/CSSのサイズを軽減 そのためのツール(難読化ツール)はいくつか存在するが、HTML/JavaScript/CSSのいずれにも対応したものは多くない。そこでPatu Diguaだ。 今回紹介するオープンソース・ソフトウェアはPatu Digua、HTML/JavaScript/CSSからスペースやコメントを排除するソフトウェアだ。 Patu DiguaはJavaで作られたソフトウェアで、Windows/Mac OSX/Linuxで動作する。指定したファイルからコメ
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Selectors Level 3 W3C Recommendation 06 November 2018 This version: https://www.w3.org/TR/2018/REC-selectors-3-20181106/ Latest version: https://www.w3.org/TR/selectors-3/ Previous version: https://www.w3.org/TR/2018/PR-selectors-3-20180911/ Latest version of Selectors: https://www.w3.org/TR/selectors/ Editor's Draft https://drafts.csswg.org/selectors-3/ Feedback: File an issue on GitHub Editors:
GM_addStyleの実装と最適化 - 0xFFに関連して、「IEでGM_addStyleみたいな関数ってどう書けばいいんだろ」とつぶやいたら、fubさんにcreateStyleSheetってのを教えてもらいました。で、調べてみたらcreateStyleSheetとcssTextで割と簡単に書けるみたいなので、クロスブラウザな関数にまとめてみました。 addCSS.js function addCSS (css){ if (document.createStyleSheet) { // for IE var sheet = document.createStyleSheet(); sheet.cssText = css; return sheet; } else { var sheet = document.createElement('style'); sheet.type = 'te
の39番目とGM_addStyleの実装と最適化 - 0xFFについて。 まず、style要素を使う方法。 function addStyle(css) { var style = document.getElementsByTagName('style').item(0); if (!style) { style = document.createElement('style'); style.type = 'text/css'; (document.getElementsByTagName('head').item(0) || document.documentElement).appendChild(style); } style.appendChild(document.createTextNode(css + '\n')); } 元からあるstyle要素を利用する方法。コメント欄
css先日 :visited の仕様そのものが脆弱性とかっていう話題が出てきたんですが、でも実際 既読|未読 の判定を親要素を含めてのスタイル指定において利用したいケースはわりとあると思うんです。んで、 a:visited を取得するのには a:visited の CSS のプロパティの値で判定するわけなんですが、じゃあその CSS のプロパティと値をどうするかが問題になってきます。見栄え上変わらないスタイルの指定で、かつ他に継承されても問題なさそうなプロパティ、、、はまちちゃんさんは背景色とか height とか言ってたけど汎用性の高いプロパティだとは、CSS 好きの俺の口からはとても言えません。 CSS 好きの俺からしてみれば、ここは確実に font-weight じゃねぇかなと思うわけです。 a:link { font-weight: normal; } a:visited { fo
CSS メディアクエリー 画面サイズなど、媒体の持つ特徴を利用し、スタイルシートを適用するための仕組みを提供します。 原文: “Media Queries” (W3C Recommendation 19 June 2012) セレクタ Level 3 :nth-child()や:not()など、新しいセレクタを定義するモジュールです。 原文: “Selectors Level 3” (W3C Recommendation 29 September 2011) CSS 名前空間モジュール CSSで名前空間を扱う@namespace規則を定義しています。 原文: “CSS Namespaces Module” (W3C Recommendation 29 September 2011) CSS カラーモジュール Level 3 opacityやrgba()など、色に関する値やプロパティを定義す
Over 6,000 Free Cheat Sheets, Revision Aids and Quick References! Programming Cheat Sheets Software Cheat Sheets Business and Marketing Cheat Sheets Education Cheat Sheets Home and Health Cheat Sheets Games and Hobbies Cheat Sheets Latest Cheat Sheets 3 Pages (0)Git/Github Cheat SheetThis Git Cheatsheet is a quick reference guide to essential Git commands used in version control. It provides con
Compress javascript or css code and reduce their size and improve page load times. Quick,easy and free!Best way to compress javascript and css Make your code faster for freeVersion 0.5.7
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く