マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行

2023/10/17 246 users playwright Webアプリケーション 並列実行 開発

マイクロソフトは、Webアプリケーションのテスト自動化ライブラリ「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプレビュー公開を発表しました。 Microsoft Playwright Testingに使われている「Playwright」は、マイクロソフトが中心となってオープンソースで開発... 続きを読む

11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります

2022/11/15 100 users fixed ビューポート position 挙動 配置

11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹... 続きを読む

リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | Rakuten-Tips 楽天店舗の制作運営の裏技＆豆知識

2015/03/14 370 users リニューアル エフェクト 変わり目 デモ HTML＆CSS

季節の変わり目特に春にはリニューアルするサイトも多かったりします。そんなリニューアルやサイト制作時に使いたいオシャレパーツを集めました。 cssSlider デモ | ダウンロード 名前の通りCSSだけで動くレスポンシブスライダーです。クロスブラウザにも対応してます。 WOW.sliderのようにエフェクトからカラーなど好きなように選んで設置できるので、html&CSSがよく分からない人にも簡単に... 続きを読む

WebのUIテスト自動化 - Seleniumを使ってみる - Qiita

2014/04/20 446 users Selenium Qiita Appium UIテスト自動化

Appiumを色々触っているんですが、仕組みが同じSeleniumもちょっと触ってみました。 だいぶ色々なことができそうなのでこちらも触りつつメモを取っていこうと思います。 実際の動画デモ 実際にどんなことができるのか、参考動画を撮ってみました。 内容的にはネタな感じにしていますが、どんなことができるか分かってもらえるかと思いますｗ Seleniumとは Seleniumはクロスブラウザ、クロスプ... 続きを読む

JSでクロスブラウザの動作テストを自動化できる「DalekJS」:phpspot開発日誌

2013/08/08 52 users phpspot開発日誌 スクリーンショット 動作テスト

JSでクロスブラウザの動作テストを自動化できる「DalekJS」 2013年08月08日- DalekJS - Automated cross browser testing with JavaScript JSでクロスブラウザの動作テストを自動化できる「DalekJS」。 テストコードをJavaScriptで記述すれば、指定したサイトを開いてスクリーンショットを撮って、指定位置をクリックして、と... 続きを読む

IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス | コリス

2013/05/21 308 users コリス デベロッパサイト CSS アドバイス モダンブラウザ用

Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、... 続きを読む

レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」:phpspot開発日誌

2013/04/30 62 users Unslider レスポンシブ phpspot開発日誌 指定

Unslider ? the super-tiny jQuery slider レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 クロスブラウザ・キーボードショートカット・タッチ等にも対応しており、最近の環境にマッチした使い方ができます。 コールバック、スピード調整等のオプションも指定可能。 シンプルなスライダーを実装する際にレスポンシブでタッチ対応というの... 続きを読む

textareaのキャレットを細かく制御する関連jQueryプラグインまとめ:phpspot開発日誌

2012/11/12 44 users キャレット textarea phpspot開発日誌 調査

textareaのキャレットを細かく制御する関連jQueryプラグインまとめ ちょっと調査をする必要があったので調査したのですが、あとで忘れそうなのでブログに書きつつシェアです。 textarea内のカーソル位置に何かテキストを入れたい、今のtextarea内でのカーソル位置を知りたい、といった場合、クロスブラウザの事を考えると結構面倒なのですが、そういう際に使えるjQueryプラグイン集です。 ... 続きを読む

素敵なエフェクトが複数用意されたイメージスライダー・jq-tiles - かちびと.net

2012/10/23 30 users エフェクト net 複数 jQuery OSS

画像の切り替え時のエフェクトが とっても素敵なjQueryのイメージ スライダー・jq-tilesのご紹介で す。クロスブラウザという訳では 無いのでこのままだと用途は限ら れますけど・・ 素敵なエフェクトが用意されたスライダー。CodeCanYouにあるような有料のスクリプトでたまに見かけるタイプです。OSSで公開されてるのはちょっと珍しいかも。 jq-tiles タイル状に画像が切り取られなが... 続きを読む

JavaScriptのデバッグ情報を表示してくれる『Rescue.js』 | 100SHIKI

2012/10/15 58 users 100SHIKI デバッグ情報 JavaScript デモ

まだオープン前だが、便利そうなのでご紹介。 Rescue.jsを使えば、あなたのサイトに潜む、JavaScriptのデバッグ情報をまとめて表示してくれるようだ。 いつ、どこから、どのブラウザでアクセスされたときにエラーが起きたのかを教えてくれるので便利だろう。 クロスブラウザのテストで見落としていた点がこれでわかるのかもしれないですな。 サイト上にはデモもあるので興味がある人は覗いて見るといいだろ... 続きを読む

クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」:phpspot開発日誌

2012/08/24 104 users phpspot開発日誌 ドラッグ＆ドロップ ブラウザ

クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 2012年08月24日- FileDrop ? cross-browser JavaScript Drag & Drop file upload ? Блог Прогера クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」。 対応ブラウザであれば以... 続きを読む

軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」:phpspot開発日誌

2012/07/13 102 users 日付ピッカー実装jQueryプラグイン 軽量 カスタマイズ

軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 2012年07月13日- Zebra_Datepicker, a lightweight datepicker jQuery plugin 軽量でカスタマイズ容易な日付ピッカー実装jQueryプラグイン「Zebra_Datepicker」 13KBでクロスブラウザ、CSSによるデザイン変更が容易で国... 続きを読む

IE7/8/9, 全てのモダンブラウザ、iPhone, iPad, Androidのクロスブラウザチェックができるソフトウェア -BrowseEmAll | コリス

2012/06/10 723 users iPhone コリス クロスブラウザチェック iPad IE7

デスクトップ・スマートフォン・タブレットの主要なブラウザの古いバージョンから最新版までに対応した、クロスブラウザのチェックに使えるWindows用のソフトウェアを紹介します。 BrowseEmAllのサポートブラウザ BrowseEmAllの主な特徴 BrowseEmAllの使い方 BrowseEmAllのダウンロード BrowseEmAllのサポートブラウザ デスクトップ 主要ブラウザの最新版に... 続きを読む

[CSS]CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css | コリス

2012/05/15 485 users コリス Normalize.css CSS CSSリセット

下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるもので... 続きを読む

クロスブラウザの難しさ - Life like a clown

2012/05/15 21 users Life like a clown

Web-webkit-border-radius なんて書いているWeb開発者は腹を切って死ぬべきである - hogehoge @teramako と言う記事を読んで、内容自体には頷けると言う部分も多かったのですが、該当記事を Internet Explorer 9 で閲覧して思わず苦笑する事となりました（下記画像のタイトル部分は、選択反転させています）。原因は、CSS3 で導入された rgba ... 続きを読む

コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」:phpspot開発日誌

2012/05/08 45 users JSライブラリ phpspot開発日誌 フルスクリーン表示

screenfull.js demo コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 FullScreen API のクロスブラウザで動作するラッパーライブラリです。 例えば、ページ内に画像や動画があったとしてクリックするとフルスクリーンで楽しめる、的な使い方ができます。 screenfull.request( $('#container')[0] );... 続きを読む

[CSS]シンプルながらバリエーションが豊富なソーシャルメディアのボタン | コリス

2012/03/09 81 users コリス CSS バリエーション ソーシャルメディア 階層

デモページ：カスタム CSS Social Buttonsの使い方 このソーシャルメディアのボタンはピュアCSS3でもHTML5 Canvasでもなく、背景画像を使って実装するものです。これらのアイコンはクロスブラウザで、さまざまなデザインに利用できるよう広い用途を目的としたものです。 外部ファイル スタイルシートを外部ファイルとして記述し、画像フォルダをスタイルシートを同じ階層に設置します。 <... 続きを読む

スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと. net

2011/11/12 157 users スクロールバー クロスブラウザ対応 CSS 軽量 題名

題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 Tiny Scrollbar こんな感じでデザインを変えられます。せっ... 続きを読む

昨日書いた「画像を使わずに見出しを水平線で挟むCSS」をもうちょい工夫してみる - かちびと. net

2011/11/06 36 users CSS 見出し 水平線 net 画像

昨日書いた記事は実装のみでしたので、 もう少し工夫してみました。border自体 さほど出来ることは多くはありませんが それでもちょっと素敵な見出しが画像 を使わず作れるのは個人的には結構 嬉しいTipsだったりします。 今日のはクロスブラウザとはいかないものもありますが、画像とjsは一切使用していません。基本的な事は昨日の記事をご覧になってください。 ものすごく使用頻度が高いっていうものでもない... 続きを読む

画像を使わずに見出しを水平線で挟むCSS小技 - かちびと. net

2011/11/05 195 users 見出し 水平線 net Demo 画像

ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニック です。本とかでよくある表現方法です が、これを画像を使わず実装しよう、 というもの。クロスブラウザで動作 しますので汎用性もありますね。 これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。 demo こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 CSS h1 { bo... 続きを読む

シンプル、軽量でカスタマイズしやすいフォームバリデーションjQueryプラグイン・validate.js - かちびと. net

2011/10/28 120 users 軽量 net バリデーション 備忘録 軽量ライブラリ

フォームバリデーション系のプラグインは 既に数多く良質なものが揃っているので、 今更、という気もしますが、自分と相性が 良さそうだったので備忘録。軽量でシンプル で、カスタマイズもしやすかったです。 高機能ではなくていいので、こういうのが 欲しいんですよね・・ もちろん、クロスブラウザで動作してくれます。圧縮すれば2KB以下にまで落とせる軽量ライブラリです。 validate.js バリデーション... 続きを読む

ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」:phpspot開発日誌

2011/10/26 54 users ドロップシャドウ phpspot開発日誌

ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 2011年10月26日- pShadow ? a jQuery extension for gorgeous drop shadows | Matthew Dawkins ゴージャスなドロップシャドウをクロスブラウザで実現できるjQueryプラグイン「pShadow」 $(elmeent).pShad... 続きを読む

長いフォームをステップ式にして省スペースに収めるクロスブラウザ対応でシンプルなjQueryプラグイン・BabySteps - かちびと.net

2011/09/29 47 users クロスブラウザ対応 net 省スペース 備忘録 沢山

使いやすそうだったので備忘録。 フォームをステップ式にして、 コンパクトに収められる、という jQueryプラグイン。シンプルなの でカスタマイズも割りとしやすく、 クロスブラウザでも動作してく れます。 高機能なプラグインは沢山ありますけど、既存サイトに組み込む必要がある場合はシンプルでカスタマイズしやすい方が落とし込みやすいのですが、探してみるとなかなか無いので個人的にはこういうプラグインが結... 続きを読む

設定も簡単・軽量(5KB)・シンプルな、Webサイトのフォントサイズを変更できるjQueryプラグイン・Font sizer - かちびと.net

2011/09/01 152 users フォントサイズ 軽量 net MIT 5KB

なかなか便利かもと思ったのでメモ。よくある、 フォントサイズを変更できるやつなんですけど、 設定が凄く楽で軽量なjQueryプラグインです。 導入も楽なので積極的にうまく入れて行きたい ですねー。正直使ってもらえるか分からない ものですけど、あれば誰かに役に立つかも 知れませんし。 軽量でシンプルなフォントサイザーです。クロスブラウザで動作してくれて細かい設定も簡単に出来ます。ライセンスはMITと... 続きを読む

徹底比較。クロスブラウザのテストツール15個｜designaholic -Creative Column-

2011/08/29 508 users designaholic Creative Column

HTML5や新しいデバイスの登場で今後も頭を悩まされそうなクロスブラウザのテストですが、テストツールがまとめられていたので紹介します。 Adobe BrowserLab Browsershots SuperPreview Lunascape 6 IETester IE NetRenderer Spoon Sauce Labs Browsera Browserling Mogotest Cloud ... 続きを読む