manabuyasuda / styleguide

arrange coding rule.
MIT License
164 stars 32 forks source link

[update] SVGのフルードイメージの詳細度を低くする #21

Closed manabuyasuda closed 8 years ago

manabuyasuda commented 8 years ago

img[src$=".svg"]のように要素セレクタと属性セレクタを指定している。

[src$=".svg"]のように要素セレクタを指定しなくても問題がなさそう。詳細度も0,0,1,1から0,0,1,0にできる。

/* 修正前 */
img[src$=".svg"],
object[src$=".svg"] {
  max-width: 100%;
  width: 100%; /* IE対応 */
  height: auto;
}

/* 修正後 */
/* src属性値が.svgで終わる要素に適応 */
[src$=".svg"] {
  max-width: 100%;
  width: 100%; /* IE対応 */
  height: auto;
}
manabuyasuda commented 8 years ago

そもそも<object>要素はsrcではなくdataだった。

なので以下のようになる。

/* 修正後 */
img[src$=".svg"],
object[data$=".svg"] {
  max-width: 100%;
  width: 100%; /* IE対応 */
  height: auto;
}

/* 修正後 */
[src$=".svg"],
[data$=".svg"] {
  max-width: 100%;
  width: 100%; /* IE対応 */
  height: auto;
}