IE11のバグまとめ - Qiita
バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/
[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 インラインのスタイル リンクのターゲット アクセシブルではない画像 ドキュメントの言語指定 不適切な文字セット アクセシブルではないビューポート属性 ラベルのないフォーム要素 空のインタラクティブな要素 不必要、あるいは非推奨の属性 インラインのスタイル このセレクタは、インラインのスタイルが適用されているページ上のあらゆ
![[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2a96d59143a2df01b38a0f16d119ef1fc6061d4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031401.png)
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
完全版！ テンプレートエンジン チートシート (blade, twig, volt, smarty, mustache, の比較もあるよ) - sekaie engineers' blog
まいど。セカイエでエンジニアやっている @M_Ishikawa こと石川と申します。好きな言葉はちくわ大明神です。 この記事は セカイエ Advent Calendar 2015 8日目の記事です。 Advent Calendarに参加するにあたってネタが思い当たらなかったのですが、最近ちょっと変わった経験をしたのを思い出しました。 それというのも、この半年間で、 Laravel Phalcon FuelPHP CakePHP Ethna と沢山のPHPフレームワークを同時並行して開発していたのです。 Ethna長いことやってたのにこの短期間でlaravelとcakephpとfalconとfuelphpと並行して扱ってて結構混乱。テンプレートエンジンがsmarty, blade, twig, volt, mustacheと全部異なるのも混乱。— Masayuki Ishikawa (@M_
Private Presentation
Private content!This content has been marked as private by the uploader.
Budou: 日本語のための自動折り返し制御ツール
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
CSSで指定した小数点以下の値はどのようにpxにまるめられるか - Coding Design's Tumblr
レスポンシブWebデザインでは幅にパーセントを使った指定をします。 そのパーセント値やパーセント値からpx値に置き換えた値は小数点以下の値が出てくることがよくあります。 そんなときブラウザはどのようにまるめる計算しているのかを検証したエントリーがあったのでご紹介。 まず、最初にブラウザのアクションは2つあります。 ひとつはパーセンテージの丸め方。 IE7-11…小数点第二位に切り捨てる上記以外のモダンブラウザ…より多くの小数点以下の桁数を丸めるもう一つはパーセンテージから割り出されたピクセル値の出し方。 IE8を例にみてみます。 例コンテナの幅は 1325pxコンテナ内のボックスに幅 50.5290112% を指定このボックスの幅は計算上は 669.5093984px ( (1325 / 100) x 50.5290112)IE8では669pxになるIE8でどう計算されているかというと、
マウスオーバーすると親要素の高さが変化する IE のバグ - ダーシマ・ヱンヂニヤリング
a タグにマウスを重ねると、それを内包する要素の高さがベコッと広がったまま戻らなくなるバグは、古代より受け継がれてきた由緒ある IE のバグだ。「IE hover 高さ」などでググると、このバグに悩まされている人たちがたくさん引っかかる。このバグは、 IE 10 の現代に於いても現存していて、生きた化石と言ってもよいかと思う。 このバグは再現条件が限られるし、厄介な割にはつい忘れがちなものなので、プロジェクトも終わりに差し掛かっているところで発見されることも少なくない。しかも色々な組み合わせで発生するみたいで、どのサイトも書いてある再現条件が違う。今回は全然違った条件で引っかかりました。以下が再現された HTML 。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>IEでガタつく</title> <
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
morishitterのCSSの書き方（2016年夏） - morishitter blog
今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。 僕が1番時間を使うのがこの工程だ。 今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。 ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。 最近読んだ本だと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
はてなブログのAMP対応で学ぶウェブサービスのAMP対応 - hitode909の日記
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．このあと14時から品川のマイクロソフト様のオフィスでおこなわれている，YAP(PはパチモンのP)Cで発表します． この記事では，発表資料を公開いたします．現地の方は今すぐCルームに来てください．そうでないかたは懇親会でお会いしましょう． はてなブログのトピックもあるようです． トピック「YAPC」 #yapc8ojic のツイート はてなブログのAMP対応で学ぶウェブサービスのAMP対応 2016/07/03 YAP(achimon)C::Asia Hachioji 2016 mid in Shinagawa hitode909 自己紹介 id:hitode909 @hitode909 京都から来ました はてなではてなブログを作っている 自己紹介 YAPC 2015でベスト
Nike Engineering
NIKE is a technology company. From our flagship website and five-star mobile apps to developing products,managing big data and providing leading-edge engineering and systems support, our teams at NIKE Global Technology exist to revolutionize the future at the confluence of tech and sport. We invest in and develop advances in technology and employ the most creative people in the world, and then giv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitBook – Knowledge management for technical teams
re-dzine.net situs togel online toto 2023 -
モダン日本語フォント指定
JavaScriptテストの疑問、お答えします #frontrendJS
Flexbox Patterns