메뉴 건너뛰기

김민수의 블로그

[라이믹스용 SCSS] CSS 스타일 초기화

라이믹스용 레이아웃이나 스킨 중에 글의 본문 영역까지 모든 스타일을 없애 버리는 경우가 있다.

리스트나 제목과 같이 기본 스타일이 있었으면 하는 요소가 있었기 때문에, 파이어폭스의 기본 스타일을 참고해서 작성해보았다.

다음 코드를 SCSS로 읽어들이면 컨텐츠 영역의 스타일을 복원한다.

.xe_content {
    /* This Source Code Form is subject to the terms of the Mozilla Public
     * License, v. 2.0. If a copy of the MPL was not distributed with this
     * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

    address,
    article,
    aside,
    blockquote,
    body,
    caption,
    center,
    col,
    colgroup,
    dd,
    dir,
    div,
    dl,
    dt,
    fieldset,
    figcaption,
    figure,
    footer,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    header,
    hgroup,
    hr,
    html,
    legend,
    li,
    listing,
    main,
    marquee,
    menu,
    nav,
    noframes,
    ol,
    p,
    plaintext,
    pre,
    section,
    summary,
    table,
    tbody,
    td,
    tfoot,
    th,
    thead,
    tr,
    ul,
    xmp {
      unicode-bidi: isolate;
    }

    bdi, output {
      unicode-bidi: isolate;
    }

    /* blocks */

    article,
    aside,
    details,
    div,
    dt,
    figcaption,
    footer,
    form,
    header,
    hgroup,
    html,
    main,
    nav,
    section,
    summary {
      display: block;
    }

    body {
      display: block;
      margin: 8px;
    }

    p, dl, multicol {
      display: block;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    dd {
      display: block;
      margin-inline-start: 40px;
    }

    blockquote, figure {
      display: block;
      margin-top: 1em;
      margin-bottom: 1em;
      margin-inline-start: 40px;
      margin-inline-end: 40px;
    }

    address {
      display: block;
      font-style: italic;
    }

    center {
      display: block;
      text-align: -moz-center;
    }

    blockquote[type=cite] {
      display: block;
      margin-top: 1em;
      margin-bottom: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 1em;
    }

    span[_moz_quote=true] {
      color: blue;
    }

    pre[_moz_quote=true] {
      color: blue;
    }

    h1 {
      display: block;
      font-size: 2em;
      font-weight: bold;
      margin-top: .67em;
      margin-bottom: .67em;
    }

    h2 {
      display: block;
      font-size: 1.5em;
      font-weight: bold;
      margin-top: .83em;
      margin-bottom: .83em;
    }

    h3 {
      display: block;
      font-size: 1.17em;
      font-weight: bold;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    h4 {
      display: block;
      font-size: 1.00em;
      font-weight: bold;
      margin-top: 1.33em;
      margin-bottom: 1.33em;
    }

    h5 {
      display: block;
      font-size: 0.83em;
      font-weight: bold;
      margin-top: 1.67em;
      margin-bottom: 1.67em;
    }

    h6 {
      display: block;
      font-size: 0.67em;
      font-weight: bold;
      margin-top: 2.33em;
      margin-bottom: 2.33em;
    }

    listing {
      display: block;
      font-family: -moz-fixed;
      font-size: medium;
      white-space: pre;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    xmp, pre, plaintext {
      display: block;
      font-family: -moz-fixed;
      white-space: pre;
      margin-top: 1em;
      margin-bottom: 1em;
    }

    /* tables */

    table {
      display: table;
      border-spacing: 2px;
      border-collapse: separate;
      /* XXXldb do we want this if we're border-collapse:collapse ? */
      box-sizing: border-box;
      text-indent: 0;
    }

    table[align="left"] {
      float: left;
    }

    table[align="right"] {
      float: right;
      text-align: start;
    }

    /* border collapse rules */

      /* Set hidden if we have 'frame' or 'rules' attribute.
         Set it on all sides when we do so there's more consistency
         in what authors should expect */

      /* Put this first so 'border' and 'frame' rules can override it. */
    table[rules] {
      border-width: thin;
      border-style: hidden;
    }

      /* 'border' before 'frame' so 'frame' overrides
          A border with a given value should, of course, pass that value
          as the border-width in pixels -> attr mapping */

    table[frame] {
      border: thin hidden;
    }

    /* specificity must beat table:-moz-table-border-nonzero rule above */
    table[frame="void"]   { border-style: hidden; }
    table[frame="above"]  { border-style: outset hidden hidden hidden; }
    table[frame="below"]  { border-style: hidden hidden outset hidden; }
    table[frame="lhs"]    { border-style: hidden hidden hidden outset; }
    table[frame="rhs"]    { border-style: hidden outset hidden hidden; }
    table[frame="hsides"] { border-style: outset hidden; }
    table[frame="vsides"] { border-style: hidden outset; }
    table[frame="box"],
    table[frame="border"] { border-style: outset; }

    /* Internal Table Borders */

      /* 'border' cell borders first */

    /* collapse only if rules are really specified */
    table[rules]:not([rules="none"]):not([rules=""]) {
      border-collapse: collapse;
    }

    /* only specified rules override 'border' settings
      (increased specificity to achieve this) */
    table[rules]:not([rules=""])> tr > td,
    table[rules]:not([rules=""])> * > tr > td,
    table[rules]:not([rules=""])> tr > th,
    table[rules]:not([rules=""])> * > tr > th,
    table[rules]:not([rules=""])> td,
    table[rules]:not([rules=""])> th
    {
      border-width: thin;
      border-style: none;
    }

    table[rules][rules="none"]  > tr > td,
    table[rules][rules="none"] > * > tr > td,
    table[rules][rules="none"] > tr > th,
    table[rules][rules="none"] > * > tr > th,
    table[rules][rules="none"] > td,
    table[rules][rules="none"] > th
    {
      border-width: thin;
      border-style: none;
    }

    table[rules][rules="all"] > tr > td,
    table[rules][rules="all"] > * > tr > td,
    table[rules][rules="all"] > tr > th,
    table[rules][rules="all"] > * > tr > th,
    table[rules][rules="all"] > td,
    table[rules][rules="all"] > th
    {
      border-width: thin;
      border-style: solid;
    }

    table[rules][rules="rows"] > tr,
    table[rules][rules="rows"] > * > tr {
      border-block-start-width: thin;
      border-block-end-width: thin;
      border-block-start-style: solid;
      border-block-end-style: solid;
    }

    table[rules][rules="cols"] > tr > td,
    table[rules][rules="cols"] > * > tr > td,
    table[rules][rules="cols"] > tr > th,
    table[rules][rules="cols"] > * > tr > th {
      border-inline-start-width: thin;
      border-inline-end-width: thin;
      border-inline-start-style: solid;
      border-inline-end-style: solid;
    }

    table[rules][rules="groups"] > colgroup {
      border-inline-start-width: thin;
      border-inline-end-width: thin;
      border-inline-start-style: solid;
      border-inline-end-style: solid;
    }
    table[rules][rules="groups"] > tfoot,
    table[rules][rules="groups"] > thead,
    table[rules][rules="groups"] > tbody {
      border-block-start-width: thin;
      border-block-end-width: thin;
      border-block-start-style: solid;
      border-block-start-style: solid;
    }

    /* caption inherits from table not table-outer */
    caption {
      display: table-caption;
      text-align: center;
    }

    table[align="center"] > caption {
      margin-inline-start: auto;
      margin-inline-end: auto;
    }

    table[align="center"] > caption[align="left"]:dir(ltr) {
      margin-inline-end: 0;
    }
    table[align="center"] > caption[align="left"]:dir(rtl) {
      margin-inline-start: 0;
    }

    table[align="center"] > caption[align="right"]:dir(ltr) {
      margin-inline-start: 0;
    }
    table[align="center"] > caption[align="right"]:dir(rtl) {
      margin-inline-end: 0;
    }

    tr {
      display: table-row;
      vertical-align: inherit;
    }

    col {
      display: table-column;
    }

    colgroup {
      display: table-column-group;
    }

    tbody {
      display: table-row-group;
      vertical-align: middle;
    }

    thead {
      display: table-header-group;
      vertical-align: middle;
    }

    tfoot {
      display: table-footer-group;
      vertical-align: middle;
    }

    /* for XHTML tables without tbody */
    table > tr {
      vertical-align: middle;
    }

    td {
      display: table-cell;
      vertical-align: inherit;
      text-align: unset;
      padding: 1px;
    }

    th {
      display: table-cell;
      vertical-align: inherit;
      font-weight: bold;
      padding: 1px;
    }

    tr > form:-moz-is-html, tbody > form:-moz-is-html,
    thead > form:-moz-is-html, tfoot > form:-moz-is-html,
    table > form:-moz-is-html {
      /* Important: don't show these forms in HTML */
      display: none !important;
    }

    table[bordercolor] > tbody,
    table[bordercolor] > thead,
    table[bordercolor] > tfoot,
    table[bordercolor] > col,
    table[bordercolor] > colgroup,
    table[bordercolor] > tr,
    table[bordercolor] > * > tr,
    table[bordercolor]  > tr > td,
    table[bordercolor] > * > tr > td,
    table[bordercolor]  > tr > th,
    table[bordercolor] > * > tr > th {
      border-color: inherit;
    }

    /* inlines */

    q:before {
      content: open-quote;
    }

    q:after {
      content: close-quote;
    }

    b, strong {
      font-weight: bolder;
    }

    i, cite, em, var, dfn {
      font-style: italic;
    }

    tt, code, kbd, samp {
      font-family: -moz-fixed;
    }

    u, ins {
      text-decoration: underline;
    }

    s, strike, del {
      text-decoration: line-through;
    }

    big {
      font-size: larger;
    }

    small {
      font-size: smaller;
    }

    sub {
      vertical-align: sub;
      font-size: smaller;
    }

    sup {
      vertical-align: super;
      font-size: smaller;
    }

    nobr {
      white-space: nowrap;
    }

    mark {
      background: yellow;
      color: black;
    }

    /* titles */
    abbr[title], acronym[title] {
      text-decoration: dotted underline;
    }

    /* lists */

    ul, menu, dir {
      display: block;
      list-style-type: disc;
      margin-left: 1em;
      margin-right: 1em;
      padding-left: 30px;
    }

    menu[type="context"] {
      display: none !important;
    }

    ul, ol, menu {
      counter-reset: list-item;
      -moz-list-reversed: false;
    }

    ol[reversed] {
      -moz-list-reversed: true;
    }

    ol {
      display: block;
      list-style-type: decimal;
      margin-left: 1em;
      margin-right: 1em;
      padding-left: 30px;
    }

    li {
      display: list-item;
      text-align: match-parent;
    }

    /* leafs */

    /* <hr> noshade and color attributes are handled completely by
     * the nsHTMLHRElement attribute mapping code
     */
    hr {
      display: block;
      border: 1px inset;
      margin-left: 0.5em;
      margin-right: 0.5em;
      margin-inline: auto;
      color: gray;
      box-sizing: content-box;
    }

    hr[size="1"] {
      border-style: solid none none none;
    }

    img[usemap], object[usemap] {
      color: blue;
    }

    frameset {
      display: block ! important;
      overflow: -moz-hidden-unscrollable;
      position: static ! important;
      float: none ! important;
      border: none ! important;
    }

    link {
      display: none;
    }

    frame {
      border-radius: 0 ! important;
    }

    iframe {
      border: 2px inset;
    }

    noframes {
      display: none;
    }

    spacer {
      position: static ! important;
      float: none ! important;
    }

    canvas {
      user-select: none;
    }

    /* hidden elements */
    base, basefont, datalist, head, meta, script, style, title,
    noembed, param, template {
       display: none;
    }

    area {
      /* Don't give it frames other than its imageframe */
      display: none ! important;
    }

    /* media elements */
    video {
      object-fit: contain;
    }

    audio:not([controls]) {
      display: none;
    }

    audio[controls] {
      /* This ensures that intrinsic sizing can reliably shrinkwrap our
          controls (which are also always horizontal) and produce a
          reasonable intrinsic size from them. */
      writing-mode: horizontal-tb !important;
    }

    video > .caption-box {
      width: 100%;
      height: 100%;
      position: relative;
    }

    dialog {
      position: absolute;
      inset-inline-start: 0;
      inset-inline-end: 0;
      color: black;
      margin: auto;
      border-width: initial;
      border-style: solid;
      border-color: initial;
      border-image: initial;
      padding: 1em;
      background: white;
      width: -moz-fit-content;
    }

    dialog:not([open]) {
      display: none;
    }

    marquee {
      inline-size: -moz-available;
      display: inline-block;
      vertical-align: text-bottom;
      text-align: start;
    }

    marquee[direction="up"], marquee[direction="down"] {
      block-size: 200px;
    }

}
댓글 2개
  • shanmdphd
    2020.07.02

    라이믹스가 과거 XE를 말하는건가요? 이름 바뀐지 몰랐네요.

  • misol
    작성자 misol
    2020.07.09
    @shanmdphd 님에게 보내는 답글

    이름이 바뀌었다기 보다도, 여러가지 일을 겪으면서 사용자 중심 프로젝트로 포크 되었습니다 ㅎㅎ

    https://github.com/rhymix/rhymix 에서 진행되고 있으니 한번 살펴보세요