CSS - forum.darin.ch

Elemente verschwinden lassen

René A. Da Rin — Fri, 19 Apr 2024 19:26:37 +0000

Besonders in Wordpress kommt es öfters mal vor, dass ich unschöne oder überflüssige Elemente verschwinden lassen will. Um das nicht im HTML-Code zu entfernen, behelfe ich mir da mittels CSS.

Mit visibility:hidden; mache ich das Element einfach unsichtbar, ohne dass es einen Einfluss auf den Rest des Layoutes hat.

.klassenname {
  visibility:hidden;
}

Mit display: none; rücken angrenzende Elemente auf dessen PLatz, was oftmals das schönere Ergebnis liefert.

.klassenname {
  display: none;
}

Differenziertes CSS für Desktop und Mobile

René A. Da Rin — Wed, 08 Jun 2022 01:28:23 +0000

Bei Wordpress kann man mit 'Custom CSS' das bestehende CSS beim Laden der Seite nachträglich verändern.

Oftmals ist es so, dass sich Korrekturen, welche sich auf dem Desktop gut machen, auf dem Mobile eher suboptimal daher kommen. Also kann es sinnvoll sein, die nachträglichen Anweisungen nur für den Desktop auszuführen.

Bei Mediaevent und Nakieken gibt es interessante Artikel zum Nachlesen.

Mit folgendem Code kann man die Anweisungen für die unterschiedlichen Displaygrössen eingrenzen.

/* Desktopscreen 992px to ... */
@media screen and (min-width: 992px){
.mobile {display: none !important;}
.no-mobile {display: block !important;}
  /* weiterer Code */
}

/* Small screen / tablet / 760px to 991px */
@media (max-width: 991px) {
.mobile {display: block !important;}
.no-mobile {display: none !important;}
  /* weiterer Code */
}

/* Smaller screen / tablet+phone / 480px to 759px */
@media (max-width: 759px) {
.mobile {display: block !important;}
.no-mobile {display: none !important;}
  /* weiterer Code */
}

/* Extra small screen / smartphone / 280px to 479px */
@media (max-width: 479px) {
.mobile {display: block !important;}
.no-mobile {display: none !important;}
  /* weiterer Code */
}

Konkret hatte ich nun die Situation, dass ich auf dem Desktop die Überschriften vom Absatz her nach links verschoben habe, was dann auf dem Mobile nicht mehr so gut aussah. Deshalb hab ich mein CSS so angepasst, dass diese Anweisungen auf dem Mobile nicht umgesetzt werden.

h2 { font-family: 'Titan One'; font-size: 1.2em; }
h3 { font-family: 'Titan One'; font-size: 1em; }

@media screen and (min-width: 992px){
  .mobile {display: none !important;}
  .no-mobile {display: block !important;}
  h2 { margin-left: -60px; font-size: 1.5em; }
  h3 { margin-left: -30px; font-size: 1.3em; }
}

Text markieren (und kopieren) verhindern

René A. Da Rin — Mon, 06 Jun 2022 08:21:08 +0000

Wenn Sie nicht wollen, dass Besucher auf Ihrer Webseite einfach so Texte kopieren können, dann können Sie es ihnen mit etwas CSS erschweren.

*{
-moz-user-select: none; 
-ms-user-select: none; 
-khtml-user-select: none; 
-webkit-user-select: none; 
-webkit-touch-callout: none; 
user-select: none; 
}

Das verhindert, dass der Text direkt im Browser markiert und somit kopiert werden kann. Allerdings hat der Browser ja alle Inhalte geladen, und somit kommt man über den Quellcode auch an sie heran. Aber man macht es dem 'Dieb' doch etwas schwerer und aufwändiger.

Hochgestellt/Tiefgestellt (sup/sub)

René A. Da Rin — Sun, 05 Jun 2022 10:15:55 +0000

Ich hab bei meinem Theme gerade festgestellt, dass es mir die korrekte Darstellung von ^{komplett eliminiert. Das liegt am Code des ThemenCSS.}

sup {
   margin:0;
   padding:0;
   border:0;
   font-weight:normal;
   font-style:normal;
   font-size:100%;
   line-height:1;
   font-family:inherit;
   text-align:left;
}

Um die Darstellung nun wieder korrekt hin zu kriegen, muss im Anschluss folgende Anweisung ausgeführt werden:

/* hochgestellt */
sup {
	font-size: 0.7em !important;
	vertical-align: 0.7em !important;
}

/* tiefgestellt */
sub {
	font-size: 0.7em !important;
	vertical-align: -0.5em !important;
}