CSS für Media-Queries in einer Datei zusammengefasst

Es ist performanter, wenn der Browser nur eine CSS-Datei für das Screen-Layout
laden muss. Zudem ermöglicht die Zusammenfassung die Verschachtelung von
@media-Ausdrücken, da diese dann von LESS aufgelöst werden können.

diff --git a/pom.xml b/pom.xml
index 6eea9ba..b9e7a1b 100644 (file)
--- a/pom.xml
+++ b/pom.xml
@@ -45,7 +45,7 @@
     <slf4j.version>1.5.8</slf4j.version>
     <springframework.version>3.2.4.RELEASE</springframework.version>
     <tiles.version>3.0.1</tiles.version>
-    <wro4j.version>1.7.2</wro4j.version>
+    <wro4j.version>1.7.3-SNAPSHOT</wro4j.version>
 
   </properties>
 

diff --git a/src/main/webapp/WEB-INF/templates/html-head.jsp b/src/main/webapp/WEB-INF/templates/html-head.jsp
index 1cf205c..61870cd 100644 (file)
--- a/src/main/webapp/WEB-INF/templates/html-head.jsp
+++ b/src/main/webapp/WEB-INF/templates/html-head.jsp
@@ -6,10 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
 <style type="text/css">
-  @import '${base}css/screen.css' screen and (min-width: 750px);
-  @import '${base}css/tablet.css' screen and (min-width: 750px) and (max-width: 939px);
-  @import '${base}css/phone.css' screen and (max-width: 599px);
-  @import '${base}css/tiny.css' screen and (max-width: 399px);
+  @import '${base}css/screen.css' screen;
 </style>
 <script src="${base}js/base.js"></script>
 <!--[if IE 8]>

diff --git a/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp b/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
index ae0fb68..0ef0520 100644 (file)
--- a/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
+++ b/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
@@ -9,8 +9,7 @@
   <t:putAttribute name="htmlhead" type="string">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
-    <link rel="stylesheet/less" type="text/css" href="/less/screen/layout.less" />
-    <script src="/js/less.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="/css/seitenaufteilung.css" />
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
     <p>

diff --git a/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp b/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
index d7a9472..c9a82c0 100644 (file)
--- a/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
+++ b/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
@@ -9,8 +9,7 @@
   <t:putAttribute name="htmlhead" type="string">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
-    <link rel="stylesheet/less" type="text/css" href="/less/screen/head.less" />
-    <script src="/js/less.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="/css/seitenkopf.css" />
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
     <p>

diff --git a/src/main/webapp/WEB-INF/views/test/tablet.jsp b/src/main/webapp/WEB-INF/views/test/tablet.jsp
index 5bf8882..cfe37c7 100644 (file)
--- a/src/main/webapp/WEB-INF/views/test/tablet.jsp
+++ b/src/main/webapp/WEB-INF/views/test/tablet.jsp
@@ -9,14 +9,12 @@
   <t:putAttribute name="htmlhead" type="string">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
-    <link rel="stylesheet" type="text/css" href="${base}css/screen.css" />
     <link rel="stylesheet" type="text/css" href="${base}css/tablet.css" />
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
     <p>
       Diese Seite bindet alle Styles ein, die für Tablets eingebunden
-      werden (<code>/css/base.css</code>, <code>/css/screen.css</code> und
-      <code>/css/tablet.css</code>).
+      werden (<code>/css/base.css</code> und <code>/css/tablet.css</code>).
     </p>
     <section>
       <h1>Weitere Experimente</h1>

diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index db20270..8dcf19d 100644 (file)
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -1,43 +1,47 @@
 <groups xmlns="http://www.isdc.ro/wro">
 
   <group name="base">
-    <css>/less/base/browserreset.less</css>
-    <css>/less/base/fonts.less</css>
-    <css>/less/base/util.less</css>
-    <css>/less/base/typo.less</css>
-    <css>/less/base/head.less</css>
-    <css>/less/base/navigation.less</css>
-    <css>/less/base/content.less</css>
-    <css>/less/base/prettify.less</css>
-    <css>/less/base/marginal.less</css>
-    <css>/less/base/footer.less</css>
-    <css>/less/base/formulare.less</css>
+    <css>/less/base.less</css>
     <js>/js/prettify.js</js>
   </group>
 
   <group name="screen">
+    <css>/less/screen.less</css>
+    <css>/less/tablet.less</css>
+    <css>/less/phone.less</css>
+    <css>/less/tiny.less</css>
+  </group>
+
+  <!-- Diese werden nur für die explizite Auswahl eines Stylings benötigt -->
+  <group name="tablet">
+    <css>/less/variables.less</css>
     <css>/less/screen/typo.less</css>
     <css>/less/screen/layout.less</css>
     <css>/less/screen/head.less</css>
     <css>/less/screen/navigation.less</css>
     <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
-  </group>
-
-  <group name="tablet">
     <css>/less/tablet/layout.less</css>
     <css>/less/tablet/footer.less</css>
   </group>
-
   <group name="phone">
+    <css>/less/variables.less</css>
     <css>/less/phone/typo.less</css>
     <css>/less/phone/navigation.less</css>
   </group>
-
   <group name="tiny">
+    <css>/less/variables.less</css>
     <css>/less/tiny/typo.less</css>
     <css>/less/tiny/navigation.less</css>
   </group>
+  <group name="seitenaufteilung">
+    <css>/less/variables.less</css>
+    <css>/less/screen/layout.less</css>
+  </group>
+  <group name="seitenkopf">
+    <css>/less/variables.less</css>
+    <css>/less/screen/head.less</css>
+  </group>
 
   <group name="ie8">
     <js>/js/html5shiv.js</js>

diff --git a/src/main/webapp/less/base.less b/src/main/webapp/less/base.less
new file mode 100644 (file)
index 0000000..c8ab1ee
--- /dev/null
+++ b/src/main/webapp/less/base.less
@@ -0,0 +1,12 @@
+@import 'variables.less';
+@import 'base/browserreset.less';
+@import 'base/fonts.less';
+@import 'base/util.less';
+@import 'base/typo.less';
+@import 'base/head.less';
+@import 'base/navigation.less';
+@import 'base/content.less';
+@import 'base/prettify.less';
+@import 'base/marginal.less';
+@import 'base/footer.less';
+@import 'base/formulare.less';

diff --git a/src/main/webapp/less/base/formulare.less b/src/main/webapp/less/base/formulare.less
index 0e2ff37..1584324 100644 (file)
--- a/src/main/webapp/less/base/formulare.less
+++ b/src/main/webapp/less/base/formulare.less
@@ -1,7 +1,5 @@
 /** Formulare *****************************************************************/
 
-@import '../variables.less';
-
 .form {
   position: relative;
   width: 100%;

diff --git a/src/main/webapp/less/base/head.less b/src/main/webapp/less/base/head.less
index 750995a..3c95627 100644 (file)
--- a/src/main/webapp/less/base/head.less
+++ b/src/main/webapp/less/base/head.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #header
 {
   .bpreplay;

diff --git a/src/main/webapp/less/base/marginal.less b/src/main/webapp/less/base/marginal.less
index 1b0868d..9d12af5 100644 (file)
--- a/src/main/webapp/less/base/marginal.less
+++ b/src/main/webapp/less/base/marginal.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 .marginal h1
 {
   font-size: 125%; /** 20 px */

diff --git a/src/main/webapp/less/base/typo.less b/src/main/webapp/less/base/typo.less
index a8d2add..4516a9c 100644 (file)
--- a/src/main/webapp/less/base/typo.less
+++ b/src/main/webapp/less/base/typo.less
@@ -1,7 +1,5 @@
 /** Typografische Grundeinstellungen ******************************************/
 
-@import '../variables.less';
-
 body
 {
   .droid;

diff --git a/src/main/webapp/less/phone.less b/src/main/webapp/less/phone.less
new file mode 100644 (file)
index 0000000..86d429b
--- /dev/null
+++ b/src/main/webapp/less/phone.less
@@ -0,0 +1,6 @@
+@media screen and (max-width: 599px)
+{
+  @import 'variables.less';
+  @import 'phone/typo.less';
+  @import 'phone/navigation.less';
+}

diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less
new file mode 100644 (file)
index 0000000..110dc86
--- /dev/null
+++ b/src/main/webapp/less/screen.less
@@ -0,0 +1,10 @@
+@media screen and (min-width: 750px)
+{
+  @import 'variables.less';
+  @import 'screen/typo.less';
+  @import 'screen/layout.less';
+  @import 'screen/head.less';
+  @import 'screen/navigation.less';
+  @import 'screen/marginal.less';
+  @import 'screen/footer.less';
+}

diff --git a/src/main/webapp/less/screen/footer.less b/src/main/webapp/less/screen/footer.less
index c11be8c..a9e0577 100644 (file)
--- a/src/main/webapp/less/screen/footer.less
+++ b/src/main/webapp/less/screen/footer.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #footer
 {
   padding: 2em 0;

diff --git a/src/main/webapp/less/screen/head.less b/src/main/webapp/less/screen/head.less
index b740935..b0a20bb 100644 (file)
--- a/src/main/webapp/less/screen/head.less
+++ b/src/main/webapp/less/screen/head.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #header
 {
   margin-left: -4em;

diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less
index a8cf4ff..2834d8f 100644 (file)
--- a/src/main/webapp/less/screen/layout.less
+++ b/src/main/webapp/less/screen/layout.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 body
 {
   padding: 0 3em 0 5em;

diff --git a/src/main/webapp/less/screen/navigation.less b/src/main/webapp/less/screen/navigation.less
index e393589..b970440 100644 (file)
--- a/src/main/webapp/less/screen/navigation.less
+++ b/src/main/webapp/less/screen/navigation.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #nav > hr
 {
   display: none;

diff --git a/src/main/webapp/less/tablet.less b/src/main/webapp/less/tablet.less
new file mode 100644 (file)
index 0000000..60456d9
--- /dev/null
+++ b/src/main/webapp/less/tablet.less
@@ -0,0 +1,6 @@
+@media screen and (min-width: 750px) and (max-width: 939px)
+{
+  @import 'variables.less';
+  @import 'tablet/layout.less';
+  @import 'tablet/footer.less';
+}

diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less
index c737f05..df17d2f 100644 (file)
--- a/src/main/webapp/less/tablet/footer.less
+++ b/src/main/webapp/less/tablet/footer.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 .cols_1 > #footer
 {
   margin: 0 0 0 -5em;

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index d7d37c9..6d97d70 100644 (file)
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 body
 {
   padding: 0 0 0 5em;

diff --git a/src/main/webapp/less/tiny.less b/src/main/webapp/less/tiny.less
new file mode 100644 (file)
index 0000000..ef1470b
--- /dev/null
+++ b/src/main/webapp/less/tiny.less
@@ -0,0 +1,6 @@
+@media screen and (max-width: 399px)
+{
+  @import 'variables.less';
+  @import 'tiny/typo.less';
+  @import 'tiny/navigation.less';
+}