roatnek

/*
視覚的に隠しつつスクリーンリーダーでは読み上げられる。
display:none, visibility:hidden, height:0, width:0 ではうまく機能しない（視覚・聴覚両方で該当要素は利用できない）
（インクルーシブHTML P.75より）
*/

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;

roatnek

// Node.js

var fs = require('fs');

function func() {
  try {
    fs.statSync('./foo/');
    
    // operate files in the directory foo

roatnek

// Depending on jQuery and UAParser.js

function disablePhoneLink() {
  var device_type   = new UAParser().getDevice().type;
  var is_not_mobile = !(device_type == 'mobile' || device_type == 'tablet');

  if (is_not_mobile) {
    $('a[href^="tel:"]').each(function() {
      $(this).addClass('is-disabled')
             .on('click', function(event) { event.preventDefault(); });

roatnek

タイトルで出オチ。

説明

visibility:hiddenしたフォームコントロールはタブフォーカスできない（タブオーダーから外れる）ことに気が付きました。

display:noneしたフォームコントロールがタブフォーカスできないのは知っていたし理解できるけど、visibilityは

• 「見えてるか見えてないか」の表示性を表すプロパティであり、
• displayのように存在までなくしてしまうわけではない

roatnek

• RFC 2396 Uniform Resource Identifiers (URI): Generic Syntax
• RFC 3986 Uniform Resource Identifier (URI): Generic Syntax
• Living Standard URL 4.3. URL writing
• path-absolute-URL, path-relative-URL, scheme-relative-special-URL, scheme-relative-file-URL...

roatnek

@mixin pseudo-elem-icon($width, $height, $image) {
  content: "";
  width: $width;
  height: $height;
  display: inline-block;
  background: url($image) no-repeat 0 0;
  background-size: contain;
}

// Usage

roatnek

var original_array = ['D-1', 'D-2', 'D-3'];
var copied_array = original_array.concat();

original_array.push('Dragoon');

// original_array --> ['D-1', 'D-2', 'D-3', 'Dragoon']
// copied_array   --> ['D-1', 'D-2', 'D-3']

roatnek

var checkbox = document.querySelector('input[type="checkbox"]');

checkbox.addEventListener('click', function(event) {
  event.target.checked = false;
});

roatnek

if (typeof foo !== 'undefined') {
  // ...
}

roatnek

var isIE = !(window.ActiveXObject) && "ActiveXObject" in window;