目次一覧
状態:-
閲覧数:903
投稿日:2020-02-29
更新日:2020-02-29
CSSは、//でコメントアウトできない ／ CSSに、//コメントアウト記述するとどうなるの？／ CSSに間違って//記述していてもそれなりに整形表示してくれる無料のオンラインサービス
CSSは、//でコメントアウトできない ／ CSSに、//コメントアウト記述するとどうなるの？／ CSSに間違って//記述していてもそれなりに整形表示してくれる無料のオンラインサービス
CSSは、//でコメントアウトできない
//使用不可
構文は、/* コメント */
1行でも複数行でも、構文は、/* コメント */ を使用する
勘違いする理由
・PHPやJavaScriptで、CSSを動的出力する際には、//使用可
・しかし、それは出力以前のPHPやJavaScriptで有効なだけであって、出力後のCSSでは無効
・そんなの間違うわけないじゃんよ、と思うかもしれない
・しかし、来る日も来る日もJavaScriptだけをやり続けていると、いつの間にか頭が「JavaScript脳」になってしまう
・しかも、そのことに気が付かない
CSSに、//コメントアウト記述するとどうなるの？
悪影響を及ぼす
・該当箇所近くのCSS設定が反映されないことがある
・挙動不審に陥るのに、エラーも表示されないからプチパニックになる
※「invalid property value css」とか表示されればまだ可愛げもあるのだが、何も表示されないので、経験値がないとなかなか気が付かない
CSS圧縮する際、トラブルになることがある
・「//」をどう扱うかは、圧縮ツールにより異なる
・その場でエラー発生すれば良いが、エラー表示されず無事終了。ところが、一部のCSSのみ実は反映されていませんでした、ということになると目も当てられない。実際2~3度同じ目に遭遇し、(心の中で)発狂しかけた
感想
・一時間ぐらい悩んだよ
・オレの貴重な時間を返せ！ → オレ
CSSに間違って//記述していてもそれなりに整形表示してくれる無料のオンラインサービス
問題発生
・「CSSに間違って//記述しているmin.css」しか存在しない
・「CSSに間違って記述されている//」を修正するために、人間の目で把握しやすいよう、ある程度整形表示させたい
実際に試してみて、気が付いたこと
ほとんどのCSS整形ツールは、間違った記述がある(//を記載している)と全く整形してくれない
Format and Tidy CSS Code
・//を記述しているmin.cssコードをコピペしても、ある程度整形表示してくれる
・素晴らしい！
※間違い部分を人間の見た目で把握し易くなるが、自動で修復してくれるわけではない
「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される
「position:sticky;」がどうしても効かない → <header>を一旦削除してみる → <header>に「display:inline;」を指定