やあやあWebでべろっぱ共よ！元気してたかな？みんなの味方、お前の敵、プロレタリアプログラマー人間ことプロプロ人だよ！お久しぶり！

え？俺？もーほんと元気元気だよぉー！（吐血）

さぁ！いよいよ始まりました新連載！

今日のかにうせ！

みんなさ、「各ブラウザごとに対応しているCSSがちぐはぐで、わからんなりー( ;∀;)」って、困ったことあるよね！それをとーっても簡単に調べられる「Can I use…」を知ってるかな！？知ってるよね！当然だよねぇ！うわわぁー！

この新連載では！そのCan I use…からピックアップした気になる機能をみんなに紹介しちゃうよ！「こんな機能が！」ってハァハァしたり、「実装まだかな！？」ってハァハァしたりするっつー何とも粋でいなせでマザーファッカーな連載がこれ！

今日のかにうせ！

すばらしいよねー！100年つづく大連載になるだろうなー！フゥーッ↑✨

そして重要なお知らせ！この「今日のかにうせ」は連載一回目でありながら大好評につき本日で最終回と相成りました！ぎょひー！😂

まぁいいや！さっそくやってこー！ついておいで！

◆scrollbar styling

今日のかにうせは「scrollbar styling」だよぉーーー💖💖

みんなoverflow、overflow-x、overflow-yに auto とか scroll とか突っ込んじゃうよね！でもでも！だっさいスクロールバーがどうやっても出ちゃってなんかやな感じー！😠💢

うん…！スクロールバーを隠したいねぇ…！どおしよぉ…！

…ゑ？「17pxずらしたら隠れた」？

テッメーばかやろー！ぶっ殺されたいのかー！💢💢

逃げんなコラー！ケツにIE8ぶっ刺したるわー！👿👿

＜20分後＞

もー！そんな実装許されるわけないよー！！この糞エンジニア！！！死んで当然だよぉ！

でもどうしよう…！17pxずらすしかないのかなぁ…😦

大丈夫！そんなときは！「scrollbar styling」を使おうね！

書き方はこんなかんじ！

◆HTML

<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>

◆CSS

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
}
.scroller::-webkit-scrollbar {
  display: none;
}

これで消えちゃうんだぁ！すごいよねー！

疑似要素は知ってるよね？知ってるよねー！😆

▼注意点

そう！そうだね！

「-webkit-」ってプレフィックスが入ってるねー！よく気づいた！エライ！😘

みんな分かってると思うけど、「-webkit-」のベンダープレフィックスが付いてるってことは、Webkit系のレンダリングエンジンじゃなきゃ動かないって事！Chromiumに積んであるBlinkは、Webkit系だよ！

FireFoxだと、「scrollbar-width」っていう独自実装のクソうんこを使わないといけないんだよぉ！🤔

両方書かないと…うあぁ…サイアクだね…😥　つら…ﾘｽｶしょ…🤤

◆クイズコーナー

じゃあここでお待ちかねのクイズコーナーだよ！

いっくよーっ！問題！テーレッ！

FireFoxのレンダリングエンジンはなんでしょーか？

…はい！じゃあそこの全裸のガキ！

…うんうん！Gecko！そうだね！正解🌟！アマギフ500円分をプレゼントしちゃうよ！あと…おでこにね…正解シールぺた！💮

わー！似合ってるよー！！！！

ただねー、正解って言っても半分正解ってとこかなー。あのね、いまは、Servoっていうレンダリングエンジンが開発されてて、Geckoくんから徐々に移行がはじまってるんだよ！たのしみだねー！💞

◆おしまい

もう終わりの時間だよー😯

楽しい時間は早くすぎちゃうね！

次回は…あ、最終回だったね！残念だなー😖

でもしょうがないよね！コレ書くのクッソ大変だし！テンション高すぎるよぉー！💫💫

うん！じゃあね！またどこかの現場で！

ばいばーーーーい！🤗