Question

有一个很长的css文件，我决定让它组织起来并进行一些重新格式化。由于有一些工具可以做到这一点，我决定使用真实代码进行测试，但不幸的是我遇到了无法使用的结果。

我的代码包含几个部分，例如以下示例：

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

这些部分是我的问题，因为CSS Beautifier完全摧毁了它们。

可以使用哪些替代方法重新格式化css文件？我的意思是正确的。

Answer 1

您可以尝试（在线工具）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;}
}

Answer 2

在http://jsfiddle.net中尝试TidyUp选项它产生了这个结果：

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

Answer 3

在JSFiddle中使用TidyUp操作
如果使用Dreamweaver
- 进入“命令菜单”
  - 应用源格式

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

CSS Beautifier Alternative

3 个答案: