「まだそんな古いCSSを使ってるの？」現在では必要のない古いCSSを見つけて、仕様に準拠したCSSを提案してくれるツール -ReliCSS

サイト構築 -CSS

Post on:2026年2月3日

sponsorsr

CSSの新機能を早く使ってみたいと思うかもしれませんが、その前に古いCSSのメンテナンスをしなくてはと思っている人にお勧めの無料ツールを紹介します。

CSSをコピペするだけで、現在では必要のない古いCSSのハックを検出し、W3Cの仕様に準拠したCSSを提案してくれます。

ReliCSS

ReliCSSは、古いブラウザ固有のCSSハックを識別し、デベロッパーが現在の仕様に準拠したCSSに置き換えることができるように設計されたCSSハックの検出ツールです。

このツールの目的は、クリーンでメンテナンス性の高いCSSを記述できるよう支援したいと考えたもので、古いCSSとモダンCSSとの間のギャップを埋めることを目指しています。

ReliCSS

ツールの使い方は、簡単です。
まずは、CSSハックを使ったCSSを用意してみました。

* html .ie6-hack{color:red;}
div{
  -webkit-tranform:rotato(45deg);
  background-color: blue\9;
}

* html .ie6-hack{color:red;}

div{

-webkit-tranform:rotato(45deg);

background-color: blue\9;

}

上記のCSSをコピペして、「Scan CSS」をクリックします。

CSSをコピペして、「Scan CSS」をクリック

これで古いブラウザ固有のCSSハックが検出されます。

CSSハックの検出結果

結果は左から、

Total: 合計数
High: 高リスク、現在サポートされていないブラウザ（IE6,7）向けのハックが使用された危険なCSSです。まずは削除対象として検討してください。
Medium: 中リスク、現在サポートされていないブラウザ（IE8-10）向けのハックが使用されたCSSです。CSSは動作しますが、脆弱です。実際のビジターにとって有効なCSSであるか確認してください。
Low: 低リスク、ベンダープレフィックス（-webkit, -moz）が使用されたCSSです。概ね安全ですが、Autoprefixerなどのツールの方が扱いやすいので、ビルドプロセスに見直しが必要か検討してください。

CSSハックの検出結果

検出結果には、お勧めの対応方法も掲載されています。

たとえば、* html .ie6-hackのお勧めの対応方法は、これらのブラウザはサポートされていません。必要に応じて適切なフォールバックをするために@supportsを使用してくてください。また、古いブラウザをサポートする必要がある場合は、機能検出ライブラリを検討してください。

-webkit-tranformのお勧めの対応方法は、2026年現在Safariとの互換性のため、-webkit-のいくつかはまだ必要です。Autoprefixerを使用してプレフィックスを自動管理するか、Safari用の重要なプレフィックスは手動で保持してください。

と、こんな感じです。

ReliCSSにはサンプル用のCSS（Insert Sampleをクリック）も用意されているので、試してみました。

サンプル用のCSSで検出

結果は、下記の通り。
高リスクのCSSがけっこう含まれているようです。

CSSハックの検出結果

サンプル用のCSSは、下記のCSSです。
長年、CSSを触ってきた人には、懐かしさがあると思います。

/* Sample CSS file with various browser hacks for testing */

/* [FIX TEST] Commented-out code should NOT be flagged as hacks */
/* These hacks are commented out and should be ignored by the scanner:
   * html .old-ie { color: red; }
   * width: 100px;
   _margin: 5px;
   background: red\9;
*/

/* [FIX TEST] Real hack below WILL be flagged (not commented out) */
* html .ie6-only {
  color: red;
  _width: 100px; /* Underscore prefix - IE6 */
}

/* IE7 Only */
* + html .ie7-only {
  color: blue;
  margin: 10px;
}

/* IE8 Filter */
.filter-gradient {
  _background: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00')";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00');
  background: linear-gradient(to right, red, green);
}

/* IE8-10 trailing \9 hack */
.ie-hack {
  background-color: blue\9;
  color: red;
}

/* IE10+ High Contrast */
@media screen and (-ms-high-contrast: active) {
  .high-contrast {
    color: white;
    background: black;
  }
}

/* Firefox specific hack */
@-moz-document url-prefix() {
  .firefox-only {
    color: orange;
  }
}

/* WebKit Device Pixel Ratio */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .webkit-only {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  }
}

/* Vendor Prefixes - Usually needed but can be automated */
.transform {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.gradient {
  background: -webkit-linear-gradient(top, red, blue);
  background: -moz-linear-gradient(top, red, blue);
  background: linear-gradient(to bottom, red, blue);
}

/* Old Opera (Presto) prefix - obsolete */
.old-opera {
  -o-border-radius: 5px;
  border-radius: 5px;
}

/* KHTML prefix - very old WebKit */
.khtml-hack {
  -khtml-user-select: none;
  user-select: none;
}

/* Escaped property hack */
.escape-hack {
  width\9: 300px;
  width: 200px;
}

/* IE6-7 Zoom hack for hasLayout */
.ie-zoom-trigger {
  zoom: 1;
  position: relative;
}

/* IE filter opacity hack */
.ie-opacity {
  filter: alpha(opacity=50);
  opacity: 0.5;
}

/* IE6-7 Inline-block hack */
.ie-inline-block {
  display: inline-block;
  zoom: 1;
  *display: inline;
}

/* IE6-7 Clearfix using position and zoom */
.clearfix {
  position: relative;
  zoom: 1;
  overflow: hidden;
}

/* Selection styling - standard and vendor prefixes */
::selection {
  background: #ffd700;
  color: #000;
}

::-moz-selection {
  background: #ffd700;
  color: #000;
}

/* Placeholder styling with multiple vendor prefixes */
input::placeholder {
  color: #999;
}

input::-webkit-input-placeholder {
  color: #999;
}

input:-moz-placeholder {
  color: #999;
}

input:-ms-input-placeholder {
  color: #999;
}

/* IE6 Backslash-7 hack */
.ie6-backslash-7 {
  height: 100px\\7;
}

/* IE6 Star-7 hack */
.ie6-star-7 {
  width: 200px * 7;
}

/* IE media query hacks */
@media all {
  .ie-media-hack {
    color: green;
  }
}

/* IE7 complex sibling selector hack */
*:first-child + html .ie7-sibling-hack {
  color: purple;
}

/* WebKit keyframes with vendor prefix */
@-webkit-keyframes slide {
  from {
    left: 0;
  }
  to {
    left: 100px;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Firefox keyframes with vendor prefix */
@-moz-keyframes slide {
  from {
    left: 0;
  }
  to {
    left: 100px;
  }
}

/* Standard keyframes */
@keyframes slide {
  from {
    left: 0;
  }
  to {
    left: 100px;
  }
}

/* IE6-7 behavior property with HTC file */
.custom-behavior {
  behavior: url(/assets/pie.htc);
  border-radius: 10px;
}

/* IE9 MS transform prefix */
.ie9-transform {
  -ms-transform: skew(10deg);
  transform: skew(10deg);
}

/* IE6 height hack with zoom */
.ie6-height {
  height: 100%;
  zoom: 1;
}

/* IE6-7 width expression hack */
.ie-expression {
  width: expression(document.body.clientWidth - 20 + 'px');
}

/* Modern CSS that doesn't use hacks */
.modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* @supports for feature detection */
@supports (display: grid) {
  .grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@supports not (display: grid) {
  .grid-layout {
    display: flex;
    flex-wrap: wrap;
  }
}

/* WebKit properties still needed in 2026 for Safari compatibility */
.webkit-examples {
  /* Text styling extensions */
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2px;
  -webkit-font-smoothing: antialiased;

  /* Appearance and UI control */
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  -webkit-touch-callout: none;
  -webkit-user-drag: none;

  /* Mask-related properties */
  -webkit-mask: url(mask.svg);
  -webkit-mask-image: linear-gradient(black, transparent);
  -webkit-mask-position-x: center;
  -webkit-mask-position-y: center;
  -webkit-mask-size: cover;

  /* Miscellaneous still-needed prefixes */
  -webkit-line-clamp: 3;
  -webkit-box-reflect: below 5px;
  -webkit-text-security: disc;
}

/* Media query still needed for high-DPI detection */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .high-dpi {
    background-image: url(high-res-image.png);
  }
}

/* ignore private CSS custom properties */
:root {
  _--private-variable: 10px;
  --underscore_variable: 10px;
  --bem__variable: 10px;
  --bem__Variable--modifier: 15px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

/* Sample CSS file with various browser hacks for testing */

/* [FIX TEST] Commented-out code should NOT be flagged as hacks */

/* These hacks are commented out and should be ignored by the scanner:

* html .old-ie { color: red; }

* width: 100px;

_margin: 5px;

background: red\9;

/* [FIX TEST] Real hack below WILL be flagged (not commented out) */

* html .ie6-only {

color: red;

_width: 100px; /* Underscore prefix - IE6 */

}

/* IE7 Only */

* + html .ie7-only {

color: blue;

margin: 10px;

}

/* IE8 Filter */

.filter-gradient {

_background: none;

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00')";

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00');

background: linear-gradient(to right, red, green);

}

/* IE8-10 trailing \9 hack */

.ie-hack {

background-color: blue\9;

color: red;

}

/* IE10+ High Contrast */

@media screen and (-ms-high-contrast: active) {

.high-contrast {

color: white;

background: black;

}

/* Firefox specific hack */

@-moz-document url-prefix() {

.firefox-only {

color: orange;

}

/* WebKit Device Pixel Ratio */

@media screen and (-webkit-min-device-pixel-ratio: 0) {

.webkit-only {

text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);

}

/* Vendor Prefixes - Usually needed but can be automated */

.transform {

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

.gradient {

background: -webkit-linear-gradient(top, red, blue);

background: -moz-linear-gradient(top, red, blue);

background: linear-gradient(to bottom, red, blue);

}

/* Old Opera (Presto) prefix - obsolete */

.old-opera {

-o-border-radius: 5px;

border-radius: 5px;

}

/* KHTML prefix - very old WebKit */

.khtml-hack {

-khtml-user-select: none;

user-select: none;

}

/* Escaped property hack */

.escape-hack {

width\9: 300px;

width: 200px;

}

/* IE6-7 Zoom hack for hasLayout */

.ie-zoom-trigger {

zoom: 1;

position: relative;

}

/* IE filter opacity hack */

.ie-opacity {

filter: alpha(opacity=50);

opacity: 0.5;

}

/* IE6-7 Inline-block hack */

.ie-inline-block {

display: inline-block;

zoom: 1;

*display: inline;

}

/* IE6-7 Clearfix using position and zoom */

.clearfix {

position: relative;

zoom: 1;

overflow: hidden;

}

/* Selection styling - standard and vendor prefixes */

::selection {

background: #ffd700;

color: #000;

}

::-moz-selection {

background: #ffd700;

color: #000;

}

/* Placeholder styling with multiple vendor prefixes */

input::placeholder {

color: #999;

}

input::-webkit-input-placeholder {

color: #999;

}

input:-moz-placeholder {

color: #999;

}

input:-ms-input-placeholder {

color: #999;

}

/* IE6 Backslash-7 hack */

.ie6-backslash-7 {

height: 100px\\7;

}

/* IE6 Star-7 hack */

.ie6-star-7 {

width: 200px * 7;

}

/* IE media query hacks */

@media all {

.ie-media-hack {

color: green;

}

/* IE7 complex sibling selector hack */

*:first-child + html .ie7-sibling-hack {

color: purple;

}

/* WebKit keyframes with vendor prefix */

@-webkit-keyframes slide {

from {

left: 0;

}

to {

left: 100px;

}

@-webkit-keyframes fadeIn {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

/* Firefox keyframes with vendor prefix */

@-moz-keyframes slide {

from {

left: 0;

}

to {

left: 100px;

}

/* Standard keyframes */

@keyframes slide {

from {

left: 0;

}

to {

left: 100px;

}

/* IE6-7 behavior property with HTC file */

.custom-behavior {

behavior: url(/assets/pie.htc);

border-radius: 10px;

}

/* IE9 MS transform prefix */

.ie9-transform {

-ms-transform: skew(10deg);

transform: skew(10deg);

}

/* IE6 height hack with zoom */

.ie6-height {

height: 100%;

zoom: 1;

}

/* IE6-7 width expression hack */

.ie-expression {

width: expression(document.body.clientWidth - 20 + 'px');

}

/* Modern CSS that doesn't use hacks */

.modern {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 20px;

padding: 20px;

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

}

/* @supports for feature detection */

@supports (display: grid) {

.grid-layout {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

}

@supports not (display: grid) {

.grid-layout {

display: flex;

flex-wrap: wrap;

}

/* WebKit properties still needed in 2026 for Safari compatibility */

.webkit-examples {

/* Text styling extensions */

-webkit-text-fill-color: transparent;

-webkit-text-stroke: 1px black;

-webkit-text-stroke-color: red;

-webkit-text-stroke-width: 2px;

-webkit-font-smoothing: antialiased;

/* Appearance and UI control */

-webkit-appearance: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);

-webkit-touch-callout: none;

-webkit-user-drag: none;

/* Mask-related properties */

-webkit-mask: url(mask.svg);

-webkit-mask-image: linear-gradient(black, transparent);

-webkit-mask-position-x: center;

-webkit-mask-position-y: center;

-webkit-mask-size: cover;

/* Miscellaneous still-needed prefixes */

-webkit-line-clamp: 3;

-webkit-box-reflect: below 5px;

-webkit-text-security: disc;

}

/* Media query still needed for high-DPI detection */

@media screen and (-webkit-min-device-pixel-ratio: 2) {

.high-dpi {

background-image: url(high-res-image.png);

}

/* ignore private CSS custom properties */

:root {

_--private-variable: 10px;

--underscore_variable: 10px;

--bem__variable: 10px;

--bem__Variable--modifier: 15px;

}

当ブログのCSSもチェックしてみました。
「Low: 低リスク」が28個あり、全部ベンダープレフィックスだったので、とりあえずの対応はなしでいいかなと。

当ブログのCSSで検出

「まだそんな古いCSSを使ってるの？」現在では必要のない古いCSSを見つけて、仕様に準拠したCSSを提案してくれるツール -ReliCSS

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

「まだそんな古いCSSを使ってるの？」現在では必要のない古いCSSを見つけて、仕様に準拠したCSSを提案してくれるツール -ReliCSS

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info