Чимало речей зробити "по науці" неможливо, але ентузіасти винаходять шляхи, які стають серед спеціалістів потім популярними. І навпаки, існують певні правила, що стосуються неявних (невізуальних) випадків. Наприклад при користуванні программами читання з екрану. Будемо такі цікавинки складати окремо.

• Правильний лейбл для інпута (чекбокса, або радіо):

  <style>
  	  label { order: 1; color: #FFF380; }
  	  input { order: 2;  }
  </style>
  
  <label for="explicit">Name: </label>
  <input type="text" id="explicit" name="name">

• Перевірка сертифікату SSL домена:

  $url = 'ssl://nvkarta.synology.me:443';
   
  $context = stream_context_create(
  	array(
  		'ssl' => array(
  			'capture_peer_cert' => true,
  			'verify_peer'       => false, // так як проміжний сертифікат може бути відсутній,
  			'verify_peer_name'  => false  // то вимикаємо його перевірку.
  		)
  	)
  );
   
  $fp = stream_socket_client($url, $err_no, $err_str, 30, STREAM_CLIENT_CONNECT, $context);
  $cert = stream_context_get_params($fp);
   
  if (empty($err_no)) {
  	$info = openssl_x509_parse($cert['options']['ssl']['peer_certificate']);
  /* 	print_r($info); */
  	
  echo 'Домен: '   . $info['subject']['CN'] . " • ";
  echo 'Виданий: '   . $info['issuer']['CN'] . " • ";
  echo 'Діє до: ' . date('d.m.Y H:i', $info['validTo_time_t']);	
  

• Оформлення строки відточкою з допомогою BerryНаверх

  <p class="flex"><span>Оформлення строки відточкою</span><span class="flex-grow5 mar20-l bor1 bor-dashed-b bor-gray700"></span><a class="mar10-l pad10-rl hover-no-underline" href="#top">Наверх</a></p>
  

• Стилізація SVG повна і часткова

  <style>
  	.svg_icon {
  	  fill: gray;
  	}
  	.svg_icon:hover {
  	  fill: #DBBD88;
  	}
  </style>
  
  <svg viewBox="0 0 32 32"  class="svg_icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  	<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
  </svg>
   
  <svg viewBox="0 0 32 32"  class="svg_icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  	<g><path style= "fill: gray;" d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/>
  	<path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
  </svg>