0

Having a long css file I have decided to make it organized and do some reformatting. As there are some tools to do that, I decided to test it with real code, but unfortunately I am experiencing unusable results.

My code contains several sections such as the following example:

@-webkit-keyframes flash {
  0%, 50%, 100% {opacity: 1;}  
  25%, 75% {opacity: 0;}
}

And these sections are my problem, as CSS Beautifier completely destroy them.

What alternatives can be used to reformat css files? I mean properly.

4

3 回答 3

2

您可以尝试（在线工具）Procssor - 处理后的结果：

menu { color: red }
navigation { background-color: #333 /* darkgrey */ }
@-webkit-keyframes flash { 
    0%,
    50%,
    100% { opacity: 1 }
    25%,
    75% { opacity: 0 }
}

或CSS Beautify处理后的结果：

menu {
    color: red;
}

navigation {
    background-color: #333 /* darkgrey */;
}

@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    };
}

原始代码在哪里

menu{color:red} navigation{background-color:#333 /* darkgrey */}
@-webkit-keyframes flash {
0%, 50%, 100% {opacity: 1;}  
25%, 75% {opacity: 0;}
}
于 2013-10-01T17:43:25.300 回答
1

尝试http://jsfiddle.net中的 TidyUp 选项 它会产生以下结果：

@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
于 2013-10-01T17:38:58.930 回答
1
  • 在 JSFiddle 中使用 TidyUp 选项

  • 如果使用 Dreamweaver

    • 转到命令菜单
      • 应用源格式

这将格式化您的完整 CSS 文件

于 2013-10-01T17:41:13.583 回答