how to minify css file containing @page


Tags: c#,html,asp.net,css,asp.net-mvc-4

Problem :

css file for media='print' contains @page directive

.myreceipt {
    @page {
        visibility: hidden;
        margin: 0 15px;
    }

    @page {
        height: auto;
    }
}

ASP.NET MVC4 builtin minification does not minify it. Looking into source shows error

(2390,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@page'

How to minify css containing @page in ASP.NET/Mono MVC4 application ?



Solution :

Invalid CSS syntax. Do it this way:

@page hide {
    visibility: hidden;
    margin: 0 15px;
}

.myreceipt {
    page: hide
}

By the way, what you should be using is @media instead of @page

@media print {
    .myreceipt {
         visibility: hidden;
         margin: 0 15px;
    }
}

    CSS Howto..

    How to add image after button/div css?

    How to make div expand only from bottom down

    How to run multiple css selector classes at once?

    How do I position the search box to my specs?

    How to add a play icon to Image on CSS

    CSS Cascading takes over inheritance, how to solve this?

    How to make a CSS transform affect the flow of other elements

    How to force html/css padding/margin on an element?

    How to place Facebook send dialog box above other content?

    How to utilize CSS only button markup?

    Large white space below footer showing on certain pages on iPhone actual device but not emulator in Chrome

    jquery how to make an element comeback to initial position after animation

    CSS - how to make the div display as shorter list box?

    How to set an auto minimum width on column with css?

    how to center css class images with text?

    How to make css styles in the document body only specific to a div

    How can I set different gradients as background, each time user refreshes?

    How can I modify my CSS to require a class instead of a “+ label”?

    how do I zoom a background image on a div with background-size

    CSS: How to create a
  • with 100% width
  • How to prevent mobile keyboard from rising footer over the text fields?

    How to assign CSS to mobile page in asp.net

    How to place a button in the middle of the page using HTML and CSS

    By CSS, how to make page height not change when an element is moved down

    How to have a background image size (without affecting the div)?

    How to center an image between two columns in CSS?

    How to make a background text appear under youtube video?

    how to hover after calling jquery animate()

    How do I stagger divs like Google Plus?

    How do I fix a Wordpress meta box that's blown out by it's content?