XSound.js 1.13.0 リリース

XSound.js 1.13.0 をリリースしました.
今回のリリースで, Microsoft Edge にもおおよその機能は対応しました.

といっても, 大した対応はしていません.

Edge の ScriptProcessorNode のバグに対応しただけです.

ScriptProcessorNode インスタンスを生成するには, AudioContext インスタンスの createScriptProcessor を利用します. 例えば, 以下のような感じ

const context = new AudioContext();
const processor = context.createScriptProcessor(2048, 2, 2);

第1引数は, 必須で onaudioprocess イベントのバッファサイズを指定します.
第2引数, 第3引数はオプションで, それぞれ, 入力チャンネル数 / 出力チャンネル数を指定します.
省略した場合は, どちらもデフォルト値 2 が適用されると仕様では定義されています.

実は, Edge はこの仕様に反していて, 明示的に入力チャンネル数 / 出力チャンネル数を指定しないとダメなのです.

ここを省略していたので, 1.13.0 より前のバージョンにおいて Edge でエラーが出ていました.

これを, PR 送って修正したいのですが, Edge の Web Audio API のソースが公開されていないようなのです…
(誰かご存知でしたら教えていただけると助かります〜)

ちなみに, WebKit と Gecko の Web Audio API のソースは公開されているのですが…

Microsoft Edge でも X Sound を楽しんでください~

border-radius と overflow : hidden

border-radius で角丸スタイルにする場合, 内包の要素も角丸にするためには,
外側の要素に, overflow : hidden を指定する必要があります.

No overflow : hidden;
overflow : hidden;

 

ソース

/* overflow : hidden; なし */

.radius-2 {
    border-radius        : 1000px;
    color                       : #fff;
    font-size                : 24px;
    background-color : #00f;
    margin-bottom     : 24px;
}

.inner {
    border: 3px solid #FF0;
}
/* overflow : hidden; あり */

.radius-1 {
    border-radius       : 1000px;
    overflow                :  hidden;
    color                       : #fff;
    font-size                : 24px;
    background-color : #00f;
    margin-bottom     : 24px;
}

.inner {
    border: 3px solid #FF0;
}

iOS でスクロールを完全に無効にする

デスクトップや Android の場合, CSS を以下のように設定するだけでスクロールを無効にできます.

html, body {
    height: 100%;
    overflow: hidden
}

しかし, iOSでは, 上記の CSS の設定だけでは, わずかながらにスクロールできてしまいます.
iOS でスクロールを完全に無効にするには, JavaScript による制御も必要です.

    window.addEventListener('touchmove', event => {
        event.preventDefault();
    }, true);

CSS position: fixed で センタリングする 2

CSS で position: fixed; にしてしまうと, margin: auto; などでのセンタリングが効かなくなります.

センタリングしたい要素のサイズがわからない場合は, さらにやっかいです.

しかし, 方法はあります.

<div style="position: fixed; z-index: 1; width: 100%; text-align: center;">
    <div style="display: inline-block; padding: 0.75em 1em; font-size: 12px; color: #fff; background-color: #999;">Fixed</div>
</div>

ポイントはセンタリングしたい要素を囲むブロックに対して, 以下の3つのスタイルを定義することです.

position: fixed;
width: 100%;
text-align: center;

あとは, センタリングしたい要素を inline-block にするだけです.

Fixed

CSS position: fixed で センタリングする 1

CSS で position: fixed; にしてしまうと, margin: auto; などでのセンタリングが効かなくなります.

しかし, 要素のサイズ (width と height) がわかっている場合, left と margin-left を利用することでそれを解決できます.

ポイントは2つです

left: 50&;
margin-left: -(ブロックの width の 1/2)  /* ネガティブ margin */
Fixed

CSS3 Flexbox を学ぶ 9

Flexbox には柔軟なレイアウトを実現するために, 様々なプロパティが定義されています. 今回は, その1つである flex-shrink について紹介します.

flex-shrink は, これまでのプロパティと異なり, コンテナ内の要素に指定します.

まずは, ざっとコードを見てみましょう.

結果はこうなります

flex-shrink
flex-shrink

ポイントは以下のとおりです.

1. 要素を包括するコンテナとなる要素に diplay: flex (Safari対策に,  display: -webkit-flex) を指定する

2. 大きさを変えたいコンテナ内の要素に, で flex-shrink: 2 (Safari対策に,-webkit-flex-shrink: 2) のように指定する

Just another WordPress site