Tips for optimizing a CSS file that includes the @page at-rule

When the CSS file for media='print' contains the @page directive,

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

    @page {
        height: auto;
    }
}

The ASP.NET MVC4 built-in minification tool does not minify it correctly. Upon examination of the source, an error is revealed:

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

Is there a way to properly minify CSS that includes the @page directive in an ASP.NET/Mono MVC4 application?

c#htmlasp.netcssasp.net-mvc-4

Answer №1

Incorrect CSS formatting. Use the following method:

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

.myreceipt {
    page: hide
}

Just a heads up, you should consider using @media instead of @page

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the transformation of subfolder into a subdomain be done with IIS7?

I am trying to access my asp.net application, which is currently on the subdomain sub.domain.com. Is it possible to access this application by typing www.domain.com/sub using IIS7? ...

asp.netiis-7url-rewritingsubdomain

Access information within an HTML dataset

After successfully retrieving the HTML data from a website using the WebClient class, I am now seeking a way to extract the data found between tags without resorting to the htmlagilitypack library. Below is the code snippet I am utilizing to obtain the H ...

c#.netasp.net

Update the Parent CRM Page upon closing the child ASP.net page

This pertains to CRM 2016 on-premise implementation. In my CRM 2016 environment, I have a customized button in the command bar that utilizes a JavaScript web resource to invoke an external asp.net page hosted on another server. This external page facilita ...

javascriptasp.netcrmmicrosoft-dynamicsdynamics-crm-2016

Unexpected outcomes arise when splitting Regex with a semi-colon

I am attempting to separate a string that is presented in the following format: 9A ##{Indie; Rock}## (This particular string originates from an mp3 tag via TagLib) The code I am using is as follows: string[] parts = Regex.Split(comment,"##{"); ...

c#asp.netregexsplit

Triggering scroll snapping in CSS based on a different user action than just scrolling

Take a look at this example: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css Try this to recreate the issue: Click on the input at the top Scroll to the bottom, then click on an empty area Observe how the screen jumps back up to the top ...

css

Ways to resolve the issue of being unable to retrieve data using jQuery

My code is working, but I am facing a little annoying problem that I can't solve on my own. The problem is that I can only retrieve the first record (id) from my data grid, but I can't retrieve the second or any other record id. For example: W ...

phpjqueryhtmlajax

What is the process for altering the color of a table using JavaFX?

In my JavaFX application, I'm working with a table and I want users to be able to change the color of the selected element using a color picker. However, when I attempt the following code: menuBar.setStyle("-fx-background-color:" + settings.getRgbSt ...

javacssjavafx

Issue with MUI Grid item not functioning properly when using overflowY: "auto"

I am encountering an issue while using MUI with React. I have a <Paper> element wrapping a <Grid> with 3 children elements. The problem arises when I set the overflowY property of the bottom grid item to "auto" - instead of showing the scroll b ...

cssreactjsflexboxgridmaterial-ui

Displaying images in a message box on Windows Phone 7

Currently, I have a grid set up in my WP7 application with an image and two buttons to display a custom message box. Initially, the visibility of the message box is collapsed, and everything is functioning correctly. However, I find it cumbersome to disabl ...

c#.netsilverlightwindows-phone-7

Problem with zooming and linear-gradient in Safari browser

I have implemented a linear-gradient(90deg, transparent 0 47px, #000 47px 48px); background-size: 48px; to create 1px vertical lines on the background. It is functioning correctly in all browsers, including Safari, except when the Safari browser is zoom ...

csssafarizoomingscalinglinear-gradients

React and Mui are experiencing a peculiar issue where a background is mysteriously missing from a component in a specific location

Exploring React 16 and functional components with hooks Discussing Mui 4 framework Adding a background pattern to multiple login pages seems simple, right? Here is an example of a login page component: return ( <Box width={1} height={1}> ...

cssreactjsmaterial-uibackground

I'm having trouble changing the background color on my HTML Bootstrap website. Is there a way to easily add social network buttons as well?

I'm encountering a problem here. One of my friends assisted me with Bootstrap elements for my website, but after switching my site to Bootstrap, I am unable to change the background color on my website. Can someone lend a hand? Much appreciated! Also, ...

csshtmltwitter-bootstrap

Issue with parallax scroll feature on Mobile Safari not functioning as expected

I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect wa ...

javascriptjqueryioscssmobile-safari

Effective Ways to Add Space Between Label and Textfield in React Using MaterialUI

Recently delving into the realm of React/MUI, I am faced with the challenge of crafting a login form that showcases a table-like structure where labels and TextFields align on the same row. A key requirement is to ensure equal spacing in the label column t ...

cssreactjsmaterial-ui

Transmitting files and data through C# triggers error 403, while no such issue occurs when using CURL

I am encountering an issue while attempting to upload a file and some data through a POST request from my C# program to the server. Each time, I keep receiving an error 403. The parameters for the POST request are: "id" = folder where the file will be sto ...

c#phppostuploadhttp-status-code-403

Activate a JavaScript mouse event outside of an element

https://jsfiddle.net/f8L300ug/3/ Attempting to create a drag-to-resize feature, inspired by the provided example. One challenge encountered is that when the mouse is released outside of the <body>, the mouseup event does not trigger as expected. Th ...

javascripthtml

When I attempt to press the shift + tab keys together, Shiftkey is activated

Shiftkey occurs when attempting to press the shift + tab keys simultaneously $("#buttonZZ").on("keydown",function (eve) { if (eve.keyCode == 9 && eve.shiftKey) { eve.preventDefault(); $("#cancelbtn").focus(); } if (eve. ...

javascriptjqueryhtml

After pressing submit, any associated links should automatically open in a separate tab

I have a homework assignment that requires creating a form with multiple elements, including a checkbox. Once this checkbox is checked, the links displayed on the resulting page should open in a new tab. The catch? I can only use HTML and CSS - no JavaScri ...

htmlformsinputcheckbox

Can footer.html be omitted from the base.html file when extending it for Django?

I'm using base.html as my template which includes {% include 'footer.html' %} in every page. However, there are certain pages where I don't want the footer to appear. Is there a way to exclude the footer on specific pages using some sor ...

htmldjango

How come my MySQL date is decreasing by one day when using JavaScript?

My todo list is stored in a MySQL database with columns for todoTitle and todoDate. However, when I display the todoDate on my website, it shows the date decremented by one day. For example, if the date in the database is 2016-12-20, it will show as 2016-1 ...

javascripthtmlmysqlnode.jsdate